天合建设集团网站,如何创建一个微信公众号,秀山微信网站建设,有赞微商城小程序我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣学习前端知识 前言 大家好 我是歌谣 今天要说得是用taro封装一个组件 核心是学会弹性布局 直接上代码
组件部分 子组件 import Taro, { Component } from tarojs/taro;
import { Text, View, Image… 我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣学习前端知识 前言 大家好 我是歌谣 今天要说得是用taro封装一个组件 核心是学会弹性布局 直接上代码
组件部分 子组件
import Taro, { Component } from tarojs/taro;
import { Text, View, Image } from tarojs/components;
import ./index.scss;
/*** description 列表渲染页面* param :musicVedioList 列表渲染数据**/
class BaseMusic extends Component {state {};render() {const { musicVedioList {} } this.props;return (ViewView classNamemusic_videoViewView classNamemusic_video_img_title{musicVedioList.text}/ViewImageclassNamemusic_video_imgmodewidthFixsrc{musicVedioList.src}/Image/ViewView classNamemusic_video_infoView classNamemusic_video_header{(musicVedioList.status 1 || musicVedioList.status 2) (View classNamemusic_video_header_leftText classNamemusic_video_header_left_text赠/Text/View)}View classNamemusic_video_header_right{musicVedioList.title}/View/ViewView classNamemusic_video_bodyText classNamemusic_video_body_left{musicVedioList.learn}/TextView classNamemusic_video_seperator/ViewText classNamemusic_video_body_right{musicVedioList.learnlist}/Text/ViewView classNamemusic_video_footerText classNamemusic_video_footer_left{musicVedioList.price}/TextText classNamemusic_video_footer_right{musicVedioList.count}/Text/View/View/View{musicVedioList.status 1 (View classNamemusic_video_info_textText classNamemusic_video_info_text_left赠送人:/TextText classNamemusic_video_info_text_text{musicVedioList.count}/TextText classNamemusic_video_info_text_right赠送人手机号码:/TextText classNamemusic_video_info_text_text{musicVedioList.count}/Text/View)}{musicVedioList.status 2 (View classNamemusic_video_info_textText classNamemusic_video_info_text_left领取人:/TextText classNamemusic_video_info_text_text{musicVedioList.count}/TextText classNamemusic_video_info_text_right领取人手机号码:/TextText classNamemusic_video_info_text_text{musicVedioList.count}/Text/View)}/View);}
}export default BaseMusic;父组件调用
import Taro, { Component } from tarojs/taro;
import BaseMusic from /components/BaseMusicVedio;
import { Text, View, Image } from tarojs/components;
class donationHistory extends Component {state {musicVedioList: {src:https:d/R-C.0620e8589f9dd002dd58572b61120c78?rikIOJRD57WVYlxQwriuhttp%3a%2f%2fimg.ivsky.com%2fimImgRawr0,title: 30个字壹贰叁肆伍陆柒捌玖拾壹贰叁肆伍陆柒捌玖拾,learn: 我是learn,learnlist: 我要学习,price: 100,count: 100,status: 2,text: 你好呀你好呀}};render() {const { musicVedioList } this.state;return (ViewBaseMusic musicVedioList{musicVedioList}/BaseMusic/View);}
}
export default donationHistory;运行结果 总结 简单父子组件状态 加上状态判断 外加弹性布局
