当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 小程序如何制作商品列表排序

小程序如何制作商品列表排序

2018-07-13 16:08 来源: 霸界科技

摘要:小程序商城里,通常会有商品列表,里边还会有排序点击,那么这种排序点击的样式是如何开发的?...

期权保本理财
  小程序商城里,通常会有商品列表,里边还会有排序点击,那么这种排序点击的样式是如何开发的?
 
小程序如何制作商品列表排序
 
  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
 
  })
 
  }
 
  }
 
  })
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088