微信小程序> 微信小程序模板,微信小程序template模块基本使用

微信小程序模板,微信小程序template模块基本使用

浏览量:744 时间: 来源:qq_36901488
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。首先在pages目录下新建一个template目录用来存放模板模板怎么建呢?模板只需要新建xxx.wxss和xxx.wxml这两个文件就可以了,其他两个.js和.json不需要在template目录中新建list-template.wxml和list-template.wxss
list-template.wxml:
templatename='listTmp'viewviewimagesrc='/images/avatar/0.png'/imagetextmay92018/text/viewtext火影村/textimagesrc='/images/detail/carousel/6.jpg'/imagetext火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火/textviewimagesrc='/images/icon/view.png'/imagetext88/textimagesrc='/images/icon/star.png'/imagetext88/text/view/view/templatelist-template.wxss:
.tmpContainer{display:flex;flex-direction:column;}.avatar_dateimage{width:60rpx;height:60rpx;/把此元素放置在父元素的中部。就可以让图片与文字都在中间了/vertical-align:middle;margin-right:10rpx;}.avatar_date{padding:10rpx;}.avatar_datetext{font-size:32rpx;}.company{margin-left:10rpx;font-size:36rpx;font-weight:700;margin:10rpx;}.contentImg{width:100%;height:460rpx;}.content{font-size:32rpx;/段落首字母缩进两个字/text-indent:64rpx;}.collection_loveimage{width:32rpx;height:32rpx;vertical-align:middle;margin-right:10rpx;}.collection_lovetext{font-size:28rpx;margin-right:10rpx;}在list.wxml中引入模板:
!--在头部引入,注意结尾别忘了/--importsrc='/pages/template/list-template.wxml'/然后在你想用模板的地方引用还要在list.wxss中像以下样子引入模板样式

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎