版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/l13620804253/article/details/80182582
小程序商城里,通常会有商品列表,里边还会有排序点击;
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
})
}
}
})
x效果图:
ype=text/javascript>ype=text/javascript>
评论前必须登录!
立即登录