微信小程序仿京东淘宝商品排序

微信小程序仿京东淘宝商品排序

效果图如下所示

仿京东微信小程序视频请加QQ:1010753897
下载地址：https://download.csdn.net/download/qq_43764578/12314561

.wxml

<view class="index">

<view class="commodities" style="margin-left:0;">
  <view class="list" wx:for="{{aaa}}" bindtap="details" data-index="{{index}}" wx:key>
    <view class="list-image">
      <image src="http://article-fd.zol-img.com.cn/g5/M00/0C/02/ChMkJ1nDjkqIFMbnAAA64DAKXRwAAgrawCAVKUAADr4377.jpg"></image>
    </view>
    <view class="list-view">
      <text>自营</text>vivo iQOO Neo 855版 8GB+128GB 冰岛极光 晓龙855vivo iQOO Neo 855版 8GB+128GB 冰岛极光 晓龙855
    </view>
    <view class="list-buttom" wx:if="{{index != 1}}">
      <view><span>￥</span>2098</view>
      <span>券</span>
      <text>看相似</text>
    </view>
  </view>
</view>


<view class="commodities">
  <view class="list" wx:for="{{bbb}}" bindtap="details" data-index="{{index}}" wx:key>
    <view class="list-image">
      <image src="http://article-fd.zol-img.com.cn/g5/M00/0C/02/ChMkJ1nDjkqIFMbnAAA64DAKXRwAAgrawCAVKUAADr4377.jpg"></image>
    </view>
    <view class="list-view">
      <text>自营</text>vivo iQOO Neo 855版 8GB+128GB 冰岛极光 晓龙855vivo iQOO Neo 855版 8GB+128GB 冰岛极光 晓龙855
    </view>
    <view class="list-buttom" wx:if="{{index != 2 || index != 6}}">
      <view><span>￥</span>2098</view>
      <span>券</span>
      <text>看相似</text>
    </view>
  </view>
</view>

</view>

.wxss

page{
  width: 100%;
  height: 100vh;
  background-color: #f7f7f7;
}
.index{
  width: 94%;
  margin: 0 3%;
  float: left;
  overflow: hidden;
}
.commodities{
  width: 49.25%;
  float: left;
  margin-left: 1.5%;
}
.list{
  width: 100%;
  background-color: #fff;
  border-radius: 10rpx;
  margin-top: 10rpx;
  float: left;
}
.list-image{
  width: 100%;
  float: left;
  height: 300rpx;
}
.list>view>image{
  width: 100%;
  height: 100%;
  float: left;
}
.list-view{
  width: 100%;
  float: left;
  padding: 3% 3% 0 3%;
  font-size: 26rpx;
  color: #000;
  line-height: 42rpx;
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2; 
}
.list-view>text{
  padding: 4rpx 8rpx 2rpx 6rpx;
  background-color: #EB3B36;
  color: #fff;
  font-size: 20rpx;
  border-radius: 8rpx;
  margin-right: 8rpx;
}
.list-buttom{
  width: 100%;
  float: left;
  padding: 4% 3%;
}
.list-buttom>view{
  float: left;
  font-size: 32rpx;
  color: #E31E1F;
  font-weight: 700;
  line-height: 40rpx;
  position: relative;
  top: 4rpx;
}
.list-buttom>view>span{
  font-size: 22rpx;
}
.list-buttom>span{
  padding: 4rpx 2rpx 2rpx 4rpx;
  border:1px solid #E31E1F;
  font-size: 20rpx;
  font-weight: 400;
  border-radius: 6rpx;
  margin-left: 10rpx;
  color: #E31E1F;
  position: relative;
  top: 2rpx;
}
.list-buttom>text{
  float: right;
  padding: 4rpx 22rpx 4rpx 22rpx;
  border-radius: 20rpx;
  font-size: 20rpx;
  color: #ccc;
  border: 1px solid #ccc;
  position: relative;
  top: 6rpx;
  right: 20rpx;
}
.solid{
  border-bottom: 1px solid #E61F18;
  margin-top: 10rpx;
}

.js

Page({
  data: {
    detail:[
      { id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }, { id: '5' }, { id: '6' },
      { id: '7' }, { id: '8' }, { id: '9' }, { id: '10' }, { id: '11' }, { id: '12' },
      { id: '13' }, { id: '14' }, { id: '15' }, { id: '16' }, { id: '17' }, { id: '18' },
      { id: '19' }, { id: '20' }
    ],
    aaa:[],
    bbb:[],
    page: '1',//分页
    limit: '20',//每页数量
  },
  onLoad:function(options){
    let that = this
    let detail = that.data.detail
    let value = ''
    for(let i = 0;i < detail.length;i++){
      value = (i+1)/2
      if (/^\d{1,10}(\.\d{0,0})?$/.test(value)) {
        that.data.bbb.push(detail[i])
      } else {
        that.data.aaa.push(detail[i])
      }
    }
    console.log('aaa',that.data.aaa)
    console.log('bbb', that.data.bbb)
    that.setData({
      aaa:that.data.aaa,
      bbb:that.data.bbb,
    })
  },
  onReachBottom: function (e) {
    let that = this
    let detail = that.data.detail
    let value = ''
    if (that.data.page * that.data.limit == (that.data.aaa.length + that.data.bbb.length)) {
      that.data.page++
      for (let i = 0; i < detail.length; i++) {
        value = (i + 1) / 2
        if (/^\d{1,10}(\.\d{0,0})?$/.test(value)) {
          that.data.bbb.push(detail[i])
        } else {
          that.data.aaa.push(detail[i])
        }
      }
      console.log('aaa', that.data.aaa)
      console.log('bbb', that.data.bbb)
      that.setData({
        aaa: that.data.aaa,
        bbb: that.data.bbb,
      })
    }
  },
 
})

有什么问题欢迎评论留言，我会及时回复你的