小程序模板網(wǎng)

微信小程序?qū)崿F(xiàn)列表復(fù)用

發(fā)布時(shí)間:2021-06-10 09:43 所屬欄目:小程序開(kāi)發(fā)教程
大家好!最近一直在做小程序開(kāi)發(fā),也做了幾個(gè)項(xiàng)目,開(kāi)發(fā)期間涉及到很多列表頁(yè)面,之前每次都是在每個(gè)頁(yè)面的wxml和wxss頁(yè)面寫了很多布局代碼,感覺(jué)一直在做重用功,為了盡量減少代碼量和后期維護(hù)的高效性,必須要走復(fù)用這步,查閱了很多資料,在這里記錄一下,同時(shí)希望對(duì)新手小伙伴有所幫助!

 

1.首先我們創(chuàng)建一個(gè)template模板文件夾  創(chuàng)建2個(gè)文件 listcell.wxml 和 listcell.wxss

2.然后我們?cè)趌istcell.wxml里創(chuàng)建自己的cell ,直接上代碼
  1. <template name="list">
  2. <view class="notify-object">
  3. <view class='hengxiang1'>
  4.    <image class='cellnotifyImage' data-index="{{index}}" src="../../images/notify1.png" />
  5.    <view class='shuxiang1'>
  6.      <text class=' textblackColor sunFont10 textsub1'>{{item.titleName}}</text>
  7.      <text class=' textblackColor70 sunFont8 textsub1'>{{item.profile}}</text>
  8.      <text class=' textblackColor97 sunFont8 textsub2'>{{item.time}}</text>
  9.    </view>
  10. </view>
  11. </view>
  12. </template> 
  13. <template name="list1">
  14. <view class="notify-object">
  15. <view class='hengxiang1'>
  16.    <image class='cellnotifyImage' data-index="{{index}}" src="../../images/notify1.png" />
  17.    <view class='shuxiang1'>
  18.      <text class=' textblackColor sunFont10 textsub1'>{{item.title}}</text>
  19.      <text class=' textblackColor70 sunFont8 textsub1'>{{item.phone}}</text>
  20.      <text class=' textblackColor97 sunFont8 textsub2'>{{item.date}}</text>
  21.    </view>
  22. </view>
  23. </view>
  24. </template>
listcell.wxss代碼無(wú)須貼出

其中 < template name=“list” > 中name為該模板的名稱,在調(diào)用的時(shí)候,可根據(jù)不同的name來(lái)引用自己需要的模板。

這里需要說(shuō)一下,布局相同的列表頁(yè)面cell都放在listcell.wxml里即可,因?yàn)椴季忠粯?,共用一套wxss。布局不相同的列表頁(yè)面cell 按照個(gè)人習(xí)慣了,也可以放在listcell.wxml里寫 也可以再創(chuàng)建一個(gè)新的文件去寫,所有不同布局的cell都放到一個(gè)listcell.wxml里寫的話,wxss里代碼會(huì)非常多,看起來(lái)不是很清晰。

3.調(diào)用template模板

在需要調(diào)用的列表頁(yè)面,引入模板文件頭文件
在main.xml文件里 這樣導(dǎo)入
  1. <import src="../../template/listcell.wxml"/>
在main.wxss文件里 導(dǎo)入
  1. @import "../../template/listcell.wxss";
需要說(shuō)一下: 如果項(xiàng)目需要大量使用一個(gè)模板,WXSS引入到全局(app.wxss 導(dǎo)入 @import “template/listcell.wxss”),減少代碼量;如果項(xiàng)目只是很少地方使用模板,可以在需要的頁(yè)面引入WXSS。
在main.xml里列表view中設(shè)置模板
  1. <view class='sencondviewback2' style="height: {{screenHeight-315}}px;">
  2.    <scroll-view scroll-y style="height: {{screenHeight-315}}px;">
  3.    <template wx:for="{{notifyListData}}" is="list" data="{{item}}"></template>
  4.    </scroll-view>
  5. </view>
通過(guò)template 標(biāo)簽使用模板,template 標(biāo)簽的 is 屬性與模板的 name 屬性對(duì)應(yīng),data 屬性代表傳入模板的數(shù)據(jù)

針對(duì)布局一樣,頁(yè)面不同內(nèi)容不同傳參肯定不同,可直接在listcell里復(fù)制多個(gè)不同name的模板,修改參數(shù)即可。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/26365.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢