小程序如何制作商品列表排序
小程序商城里，通常会有商品列表，里边还会有排序点击，那么这种排序点击的样式是如何开发的？
wxml：
<view class='sort-wrap'>
<view class='sort-btn'>
综合
</view>
<view class='sort-btn' data-index="{{daindex1}}" bindtap="choosesort1">
销量
<image src="{{imageurl1}}"></image>
</view>
<view class='sort-btn' data-index="{{daindex2}}" bindtap="choosesort2">
价格
<image src="{{imageurl2}}"></image>
</view>
</view>
wxss：
.sort-wrap{
height:90rpx;
background-color:#fff;
}
.sort-btn{
width:33.333%;
float:left;
text-align: center;
height:90rpx;
line-height:90rpx;
font-size: 28rpx;
color:#333;
}
.sort-btn image{
width: 9rpx;
height: 18rpx;
margin-left:6rpx;
}
js:
Page({
/**
* 页面的初始数据
*/
data: {
imageurl1: "../../img/sort-tip_05.png",
daindex1: 0,
imageurl2: "../../img/sort-tip_05.png",
daindex2: 0
},
/* tab */
choosesort1: function (e) {
if (this.data.daindex1 == 0) {
this.setData({
imageurl1: "../../img/sort-tip_03.png",
daindex1: 1
})
} else {
this.setData({
imageurl1: "../../img/sort-tip_05.png",
daindex1: 0
})
}
},
choosesort2: function (e) {
if (this.data.daindex2 == 0) {
this.setData({
imageurl2: "../../img/sort-tip_03.png",
daindex2: 1
})
} else {
this.setData({
imageurl2: "../../img/sort-tip_05.png",
daindex2: 0
})
}
}
})
多程序小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序商店请查看：小程序商店
上一篇
微信小程序用什么开发工具
下一篇
小程序生成图片库的实现方式
论坛资讯同步说明，本文同步自论坛：bbs.miaozhizuo.com，如您在论坛注册成为会员用户并且发帖，则默认论坛文章同步协议，协议内容请移步论坛查看！
