手把手教你搭建属于自己的小程序系列-------商品列表
1效果图商品列表
2代码部分
wxml
<import src="../index/template/shoplist.wxml" />
<text class="near">附件的商家</text>
<view class="line"></view>
<view class="newest-box">
<block wx:for="{{userData}}" wx:for-item="item" wx:key="key">
<view bindtap="getNewsDetail" data-userid="{{item.newsid}}">
<view class="shopitem">
<template is="newTemplate" data="{{...item}}" />
</view>
</view>
</block>
</view>
shoplist
<template name="newTemplate">
<view class="proitem">
<image src="{{proimg}}" class="proimg"></image>
<view><text>{{title}}</text></view>
<view><text>{{star}}</text></view>
<view> <text>{{basic}}</text> </view>
<view> <text class="yunfei">运费</text><text class="youhui">{{youhui}}</text></view>
<view class="right"><text>{{miu}}</text></view>
<view class="right01"><text class="dada">达达专送</text></view>
<view class="line"></view>
</view>
</template>
prodata js
var proData = [{"proid": 0,
"proimg": "/images/sm.png",
"title": "山姆-国际买手在身边",
"star": "月售685",
"basic": "0元起送|基础运费5元起",
"youhui": "满99元减5元运费",
"miu": "50分钟|2.9km"
},{
"proid": 1,
"proimg": "/images/shop01.jpg",
"title": "山姆-国际买手在身边",
"star": "月售685",
"basic": "0元起送|基础运费5元起",
"youhui": "满99元减5元运费",
"miu": "50分钟|2.9km"
},
{
"proid": 2,
"proimg": "/images/shop02.jpg",
"title": "山姆-国际买手在身边",
"star": "月售685",
"basic": "0元起送|基础运费5元起",
"youhui": "满99元减5元运费",
"miu": "50分钟|2.9km"
},
{
"proid": 3,
"proimg": "/images/shop03.jpg",
"title": "山姆-国际买手在身边",
"star": "月售685",
"basic": "0元起送|基础运费5元起",
"youhui": "满99元减5元运费",
"miu": "50分钟|2.9km"
},
{
"proid": 4,
"proimg": "/images/shop02.jpg",
"title": "山姆-国际买手在身边",
"star": "月售685",
"basic": "0元起送|基础运费5元起",
"youhui": "满99元减5元运费",
"miu": "50分钟|2.9km"
},{
"proid": 5,
"proimg": "/images/shop02.jpg",
"title": "山姆-国际买手在身边",
"star": "月售685",
"basic": "0元起送|基础运费5元起",
"youhui": "满99元减5元运费",
"miu": "50分钟|2.9km"
},{
"proid": 6,
"proimg": "/images/shop03.jpg",
"title": "山姆-国际买手在身边",
"star": "月售685",
"basic": "0元起送|基础运费5元起",
"youhui": "满99元减5元运费",
"miu": "50分钟|2.9km"
},{"proid": 7,
"proimg": "/images/shop04.jpg",
"title": "山姆-国际买手在身边",
"star": "月售685",
"basic": "0元起送|基础运费5元起",
"youhui": "满99元减5元运费",
"miu": "50分钟|2.9km"
},{
"proid": 8,
"proimg": "/images/shop02.jpg",
"title": "山姆-国际买手在身边",
"star": "月售685",
"basic": "0元起送|基础运费5元起",
"youhui": "满99元减5元运费",
"miu": "50分钟|2.9km"
},{
"proid": 9,
"proimg": "/images/shop01.jpg",
"title": "山姆-国际买手在身边",
"star": "月售685",
"basic": "0元起送|基础运费5元起",
"youhui": "满99元减5元运费",
"miu": "50分钟|2.9km"
},
{
"proid": 10,
"proimg": "/images/sm.png",
"title": "山姆-国际买手在身边",
"star": "月售685",
"basic": "0元起送|基础运费5元起",
"youhui": "满99元减5元运费",
"miu": "50分钟|2.9km"
}
]
暴露接口以便访问
module.exports = {
proData: proData
}
以上就是小程序实现的本地商品列表，那么在实际开发中，我们界面展示的数据，都是从后台返回的，这时候就要用到网络请求了。
3获取网络数据的商品列表
js
proShow: function (success) {
var that = this;
ajax.request({
method: 'GET',
url: 'activity/pro?key='+utils.key+'&type=thot&page=1&size=10',
success: data => {
that.setData({
brands: data.result.list
})
console.log("brands：" + data.result.list)
}
})
},
wxml
<block wx:for-items="{{pro}}" wx:key="id">
<navigator url="/pages/pro/pro?activityId={{item.id}}">
<image class="head-img" src="{{item.imgUrl}}" mode="widthFix"></image>
</navigator>
<text class="pro-name">{{item.name}}</text>
<view class='pms'>
<image class="activity-logo" src="../../images/logo.png" mode="widthFix"></image>
{{item.remark}}
</view>
</block>
写的不够到位的 望多多包涵~~
如果你在小程序开发中遇到问题
请关注我个人微信号 V18069803206
我会尽我所能解答你的疑惑
4源码下载
链接：https://pan.baidu.com/s/1bbwF6JtJbKBMQ45d77MzNg
提取码：j5ah