小程序商城里，通常会有商品列表，里边还会有排序点击，那么这种排序点击的样式是如何开发的？
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步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序商店请查看：小程序商店
小程序商城里，通常会有商品列表，里边还会有排序点击，那么这种排序点击的样式是如何开发的？
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步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序商店请查看：小程序商店
上一篇：微信小程序用什么开发工具
下一篇：小程序生成图片库的实现方式
***本网站图片，文字之类版权申明，因为网站可以由注册用户自行上传图片或文字，本网站无法鉴别所上传图片或文字的知识版权，如果侵犯，请及时通知我们，本网站将在第一时间及时删除。
我要评论
最新文章
热门阅读
随机文章
热评文章
热门标签
考古APP开发 感受历史的魅力考古APP开发安全教育app开发解决方案门店小程序类目资质表广州APP开发企业APP制作公司一招告诉你小程序码怎么生成？一文告诉你为什么鲜花店老板主动要做小程序?微信小程序好做吗？如何制作一个购买东西的小程序上海茶楼预约小程序开发越来越受青睐微信运营公众平台开发小技巧大用途为什么说门店小程序和普通小程序有着天壤之别？现在使用微信小程序收费吗微信小程序开发要很多钱吗？微信小程序插件的有什么意义呢？小程序分销超过三级什么样的微信小程序会是爆款西安哪些行业适合开发微信小程序零基础开发小程序商城之支付功能个人如何开发微信小程序微信小程序开发文档之本地调试配置如何搭建新手如何制作小程序深圳做得好的小程序公司西安微信小程序创业为什么会失败如何选择一家好的小程序开发公司微信小程序的存在价值你知道吗？小程序开发:哪类行业小程序比较容易成功？小程序定位附近店铺带来的商机，如何创建微信小程序登录授权界面如何开发小程序全屏展示图片的实现方式微信小程序支付申请微信小程序支付开发详解