E企盈营销工具技术服务商 热线:4006-838-530

微信小程序列表复用

E企盈直播平台营销卖货系统

大家好!最近一直在做小程序开发,也做了几个项目,开发期间涉及到很多列表页面,之前每次都是在每个页面的wxml和wxss页面写了很多布局代码,感觉一直在做重用功,为了尽量减少代码量和后期维护的高效性,必须要走复用这步,查阅了很多资料,在这里记录一下,同时希望对新手小伙伴有所帮助!1.首先我们创建一个template模板文件夹  创建2个文件 listcell.wxml 和 listcell.wxss 2.然后我们在listcell.wxml里创建自己的cell ,直接上代码template name=”list”view class=”notify-object” view class=’hengxiang1′   image class=’cellnotifyImage’ data-index=”{{index}}” src=”../../images/notify1.png” /   view class=’shuxiang1′     text class=’ textblackColor sunFont10 textsub1′{{item.titleName}}/text     text class=’ textblackColor70 sunFont8 textsub1′{{item.profile}}/text     text class=’ textblackColor97 sunFont8 textsub2′{{item.time}}/text   /view /view/view/template template name=”list1″view class=”notify-object” view class=’hengxiang1′   image class=’cellnotifyImage’ data-index=”{{index}}” src=”../../images/notify1.png” /   view class=’shuxiang1′     text class=’ textblackColor sunFont10 textsub1′{{item.title}}/text     text class=’ textblackColor70 sunFont8 textsub1′{{item.phone}}/text     text class=’ textblackColor97 sunFont8 textsub2′{{item.date}}/text   /view /view/view/templatelistcell.wxss代码无须贴出其中 template name=“list”  中name为该模板的名称,在调用的时候,可根据不同的name来引用自己需要的模板。这里需要说一下,布局相同的列表页面cell都放在listcell.wxml里即可,因为布局一样 ,共用一套wxss。布局不相同的列表页面cell 按照个人习惯了,也可以放在listcell.wxml里写 也可以再创建一个新的文件去写,所有不同布局的cell都放到一个listcell.wxml里写的话,wxss里代码会非常多,看起来不是很清晰。3.调用template模板在需要调用的列表页面,引入模板文件头文件在main.xml文件里 这样导入import src=”../../template/listcell.wxml”/在main.wxss文件里 导入@import “../../template/listcell.wxss”;需要说一下: 如果项目需要大量使用一个模板,WXSS引入到全局(app.wxss 导入  @import “template/listcell.wxss”),减少代码量;如果项目只是很少地方使用模板,可以在需要的页面引入WXSS。在main.xml里列表view中设置模板view class=’sencondviewback2′ style=”height: {{screenHeight-315}}px;”   scroll-view scroll-y style=”height: {{screenHeight-315}}px;”   view wx:for=”{{notifyListData}}” bindtap=’btupressDetail’ data-index=”{{index}}” wx:key=”{{keyitem}}”       template is=”list” data=”{{item}}”/template     /view   /scroll-view /view通过template 标签使用模板,template 标签的 is 属性与模板的 name 属性对应,data 属性代表传入模板的数据针对布局一样,页面不同内容不同传参肯定不同,可直接在listcell里复制多个不同name的模板,修改参数即可。如有不明白的小伙伴,可私信我!!!

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序列表复用
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏