首页 > 小程序教程 > 微信小程序生活生鲜商品出售列表设计制作开发教程

微信小程序生活生鲜商品出售列表设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序生活生鲜商品出售列表设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--index.wxml-->
<import src="../../template/item-template.wxml" />

<view class="container">
    <template is="list_index_items_tmpl" data="{{...list_index_items_tmpl}}" />
</view>
 
二、wxss样式文件代码如下:
.container {
  padding: 8px 0;
}

.item {
  padding: 8px;
  background-color: #fff;
  border-top: 1px solid #e4e4e4;
  color: #787878;
}

.item image {
  display: block;
  width: 129px;
  height: 114px;
}

.item-right {
  margin-left: 11px;
}

.title {
  margin-bottom: 25px;
}
.title text {
  font-size: 16px;
  color: #787878;
}

text {
  font-size: 15px;
  color: #444;
}
.c-1 {
  color: #09bb07;
}
三、js页面代码如下:
Page({
  data: {
    title: '',
    //向模板传入数据
    list_index_items_tmpl: {
      items: [{"mprice":0,"maxpacks":100,"price":12800,"subcate":210,"remains":998,"type":1,"freight":0,"title":"北京油鸡(小公鸡)","imgs":["https://hamlet.b0.upaiyun.com/1609/22170/362ba7ea685440e5891d6f6c661d0552.jpg"],"unit":"只","id":302,"quantity":"1"},{"mprice":0,"maxpacks":14,"price":1600,"subcate":410,"remains":14,"type":4,"freight":1000,"title":"红糖粉","imgs":["https://hamlet.b0.upaiyun.com/1604/06200/34088f0a883f4b85ae573a822ff68381.jpg"],"unit":"g","id":93,"quantity":"400"},{"mprice":0,"maxpacks":100,"price":4800,"subcate":202,"remains":5,"type":1,"freight":1000,"title":"极致Q弹肉丸子","imgs":["https://hamlet.b0.upaiyun.com/1601/27161/2e8c13bc2d0847718c223bcd0f5f6fe3.png"],"unit":"g","id":69,"quantity":"300"},{"mprice":2200,"maxpacks":100,"price":1980,"subcate":410,"remains":42,"type":1,"freight":1000,"title":"女生红糖","imgs":["https://hamlet.b0.upaiyun.com/1604/06150/c500467218ea4ce8ace753a05e31a49e.jpg"],"unit":"g","id":91,"quantity":"220"},{"mprice":2280,"maxpacks":100,"price":1880,"subcate":410,"remains":29,"type":1,"freight":1000,"title":"姜母红糖","imgs":["https://hamlet.b0.upaiyun.com/1604/06150/bef4cca020764e91a194bba87c627a8a.jpg"],"unit":"g","id":90,"quantity":"215"},{"mprice":0,"maxpacks":100,"price":1800,"subcate":301,"remains":999936,"type":1,"freight":1000,"title":"“沁州黄”小米","imgs":["https://hamlet.b0.upaiyun.com/1511/12100/e31c7dc53a874d368fa4af8e54fbffb5.jpg"],"unit":"g","id":20,"quantity":"1000"},{"mprice":0,"maxpacks":1000,"price":12800,"subcate":301,"remains":9994,"type":4,"freight":0,"title":"富硒米家庭装","imgs":["https://hamlet.b0.upaiyun.com/1606/12101/e6bbd6b6cd474a97a1786b43a063f510.jpg"],"unit":"kg","id":171,"quantity":"5"},{"mprice":0,"maxpacks":10,"price":3000,"subcate":201,"remains":99885,"type":1,"freight":1000,"title":"优选香草贵妃鸡蛋","imgs":["https://hamlet.b0.upaiyun.com/1606/24001/5cdfc1d626a7407c86d82a3c99daeaa3.jpg"],"unit":"g","id":22,"quantity":"500"},{"mprice":0,"maxpacks":100,"price":16800,"subcate":210,"remains":49956,"type":4,"freight":1000,"title":"有菜推荐香草贵妃鸡","imgs":["https://hamlet.b0.upaiyun.com/1606/24001/c40521bd9f054e2988fde39527d8e6f0.jpg"],"unit":"g","id":19,"quantity":"1250"},{"mprice":0,"maxpacks":100,"price":3800,"subcate":202,"remains":999980,"type":1,"freight":1000,"title":"深山散养黑猪后臀尖","imgs":["https://hamlet.b0.upaiyun.com/1512/15160/620395fd67164f41aba7bdfdcabe5379.jpg"],"unit":"g","id":44,"quantity":"400"},{"mprice":2480,"maxpacks":100,"price":2280,"subcate":410,"remains":0,"type":1,"freight":1000,"title":"玫瑰红糖","imgs":["https://hamlet.b0.upaiyun.com/1604/06141/92c264a3dc5d4c49ae33c9a1fbdf54e5.jpg"],"unit":"g","id":89,"quantity":"175"}]
    }
  },
  //事件处理函数
  onLoad: function (options) {
    this.title = options.type || '列表'
  },
  onReady: function () {
    wx.setNavigationBarTitle({
      title: this.title
    })
  },
})

模板简介:该模板名称为【微信小程序生活生鲜商品出售列表设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 19,904次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-19
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信图片 单页式简历模板 微信公众平台 响应式 自适应 微信素材 html5 企业网站 微信文章 微信模板
您可能会喜欢的其他模板