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

效果图如下所示

仿京东微信小程序视频请加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 = thislet detail = that.data.detaillet value = ''for(let i = 0;i < detail.length;i++){value = (i+1)/2if (/^\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 = thislet detail = that.data.detaillet 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) / 2if (/^\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,})}},})

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

微信小程序仿京东淘宝商品排序相关推荐

微信小程序仿手机淘宝新增地址自动识别地址，姓名，手机号
代码比较简单直接上代码吧 //自动识别事件 autoDiscern: function () { //省 var province = ["广东", "北京", ...
微信小程序仿京东优惠券
效果图如下所示仿京东微信小程序视频请加QQ:1010753897 下载地址:https://download.csdn.net/download/qq_43764578/12314561 .wxml ...
Android 仿京东淘宝商品详情页商品图片效果
最近重构商品,产品要求,按照淘宝京东来.... 成品如图这个效果思路就是监听外边ScrollView的滑动监听,然后给上边图片设置margin,二话不说上代码简单的界面布局 <?xml ve ...
微信小程序仿京东省市县地址选择
效果图因为是外包项目,代码以实现功能为要求而已,轻喷. 小程序部分代码 wxml <view class="page"> <view class="c ...
仿京东淘宝商品详情页中视频和图片的轮播功能
还没有学会如何上传视频到博客上,先上传图片吧案例下载地址: https://download.csdn.net/download/dawnzeng/10430298 视频播放借用了饺子播放器,最主要 ...
微信小程序仿淘票票之登录注册讲解
微信小程序仿淘票票之登录注册讲解(这也是我学习的第一步嘛) 前言一.登录以及注册的业务逻辑二.核心代码 1.register代码 2.login代码总结前言愉快的期末,终于结束了,我准备把程 ...
菜鸟窝-仿京东淘宝项目学习笔记（二）ToolBar的基本使用
本篇知识点均来自于菜鸟窝-仿京东淘宝实战项目视频中今天继续仿京东淘宝项目的学习,第二天,学习ToolBar的基本使用,本篇记录视频中一些重要的笔记笔记一:ToolBar的一些重要属性 xml st ...
微信小程序仿抖音视频
微信小程序仿抖音视频使用轮播图实现视频滑动效果. wxml 部分 <view class="video-contain">&l ...
微信小程序仿微信SlideView组件slide-view
微信小程序仿微信SlideView组件. 使用 1.安装 slide-view 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装 ...

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

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

.wxml

.wxss

.js

微信小程序仿京东淘宝商品排序相关推荐

最新文章

热门文章