学会用taro封装一个组件

我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣学习前端知识

前言

大家好我是歌谣今天要说得是用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 (<View><View className="music_video"><View><View className="music_video_img_title">{musicVedioList.text}</View><ImageclassName="music_video_img"mode="widthFix"src={musicVedioList.src}></Image></View><View className="music_video_info"><View className="music_video_header">{(musicVedioList.status === 1 || musicVedioList.status === 2) && (<View className="music_video_header_left"><Text className="music_video_header_left_text">赠</Text></View>)}<View className="music_video_header_right">{musicVedioList.title}</View></View><View className="music_video_body"><Text className="music_video_body_left">{musicVedioList.learn}</Text><View className="music_video_seperator"></View><Text className="music_video_body_right">{musicVedioList.learnlist}</Text></View><View className="music_video_footer"><Text className="music_video_footer_left">{musicVedioList.price}</Text><Text className="music_video_footer_right">{musicVedioList.count}</Text></View></View></View>{musicVedioList.status === 1 && (<View className="music_video_info_text"><Text className="music_video_info_text_left">赠送人:</Text><Text className="music_video_info_text_text">{musicVedioList.count}</Text><Text className="music_video_info_text_right">赠送人手机号码:</Text><Text className="music_video_info_text_text">{musicVedioList.count}</Text></View>)}{musicVedioList.status === 2 && (<View className="music_video_info_text"><Text className="music_video_info_text_left">领取人:</Text><Text className="music_video_info_text_text">{musicVedioList.count}</Text><Text className="music_video_info_text_right">领取人手机号码:</Text><Text className="music_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?rik=IOJRD57WVYlxQw&riu=http%3a%2f%2fimg.ivsky.com%2fim=ImgRaw&r=0",title: "30个字壹贰叁肆伍陆柒捌玖拾壹贰叁肆伍陆柒捌玖拾",learn: "我是learn",learnlist: "我要学习",price: "￥100",count: "100",status: 2,text: "你好呀你好呀"}};render() {const { musicVedioList } = this.state;return (<View><BaseMusic musicVedioList={musicVedioList}></BaseMusic></View>);}
}
export default donationHistory;

运行结果

总结简单父子组件状态加上状态判断外加弹性布局

学会用taro封装一个组件相关推荐

Taro 封装日历组件
Taro 封装日历组件文章目录 Taro 封装日历组件 API 对外暴露的方法使用案例工具类方法使用到的自定义组件完整代码 API 参数说明类型默认值必填 lang 星期的写法,中/ ...
React封装一个组件弹出框
目录前言代码简要引用效果前言我是歌谣放弃很容易但是坚持一定很酷为了保证react代码的一个简洁性最近开始封装组件, 直接上代码因为都很简单的模式这边直接进行讲解代码 //取 ...
如何封装一个导入导出excel的组件
前言在日常作期间可能会遇到一些需要利用excel文件批量导入数据的项目,例如在我们管理用户的时候,如果新增用户较多一个个添加用户就会比较麻烦,所以可以自己封装一个可以导入excel表格的组件.使用者 ...
手把手教你用js封装一个导航栏组件
文章目录前言一.实现思路介绍二.代码 1.html代码 2.js代码 3.css代码总结前言本文介绍如何用js封装一个组件,这里以导航栏为例. 看这篇文章你需要有一定的js基础哦一.实现 ...
native封装卡片 react_自己动手封装一个React Native多级联动
背景肯定是最近有一个项目,需要一个二级联动功能了! 本来想封装完整之后,放在github上面赚星星,但发现市面上已经有比较成熟的了,为什么我在开发之前没去搜索一下(项目很赶进度),泪崩啊,既然已经封 ...
asp.net core封装layui组件示例分享
什么封装?这里只是用了TagHelper,是啥?自己瞅文档去在学习使用TagHelper的时候,最希望的就是能有个Demo能够让自己作为参考怎么去封装一个组件? 不同的情况怎么去实现? 有没有更好 ...
【封装UI组件库】手把手教你仿一下Element-ui的Button组件（发布至npm）
所谓UI组件库,就是封装了平常项目开发中经常会使用的页面组件,发布至npm库中作为插件供项目组成员及其他开发者使用(不发布也行),目的就是为了避免多次重复劳动. 以插件的形式使用可以做到即插即用,非常 ...
学会使用ant design封装一个锚点组件
我是歌谣放弃很容易但是坚持一定很酷封装一个锚点组件就是要知道一个父子组件的一个传值很显然父亲这边传过去一个数组然后就可以进行循环遍历得到一个新的数值这边注意当我们进行一个map返回值得 ...
基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...

学会用taro封装一个组件

前言

学会用taro封装一个组件相关推荐

最新文章

热门文章