|
<view class="sort-container">
<view class="nav">
<ul class="choose">
<li class="{{activeHidden?'active':''}}" bindtap="changeShow" data-index="1" >选择分类</li>
<li class="{{!activeHidden?'active':''}}" bindtap="changeShow" data-index="2">选择排序</li>
</ul>
<ul class="fenlei" wx:if="{{fenleiHidden}}">
<li bindtap="switchSort" wx:for="{{listMenu}}" wx:for-item="item" data-index="{{index+1}}">{{item}}</li>
</ul>
<ul class="paixu" wx:if="{{paixuHidden}}">
<li bindtap="switchPaixu" data-index="0">销量（高到低）</li>
<li bindtap="switchPaixu" data-index="1">销量（低到高）</li>
<li bindtap="switchPaixu" data-index="2">价格（高到低）</li>
<li bindtap="switchPaixu" data-index="3">价格（低到高）</li>
</ul>
</view>
<scroll-view class="section" scroll-y="{{true}}">
<ul>
<navigator class="goodLi" url="/pages/detail/detail?goodId={{item.ProductId}}" wx:for="{{listGood}}" wx:for-item="item">
<li>
<div class="goodLeft">
<image src="{{item.ProductImage}}" mode="aspectFit"></image>
</div>
<div class="goodRight">
<p class="goodName">{{item.ProductName}}</p>
<p class="goodPrice">
￥<span class="nowPrice">{{item.ProductSalePrice}}</span>
<del>市场价:￥<span class="oldPrice">{{item.ProductMarketPrice}}</span></del>
</p>
<p class="pingjia">评价 {{item.ProductComment}}</p>
</div>
</li>
</navigator>
</ul>
</scroll-view>
</view>
|
.sort-container {
height: 100%;
display: flex;
flex-direction: column; }
.sort-container .nav {
width: 100%;
height: 43px;
background-color: #fff;
border-bottom: 1px solid #c6c7c9;
position: relative; }
.sort-container .nav .choose {
width: 100%;
display: flex;
flex-direction: row; }
.sort-container .nav .choose li {
flex: 1;
height: 40px;
text-align: center;
color: #999;
font-size: 12px;
line-height: 40px; }
.sort-container .nav .choose li.active {
color: #e65512;
border-bottom: 3px #E65512 solid; }
.sort-container .nav .fenlei, .sort-container .nav .paixu {
z-index: 999;
width: 100%;
position: absolute;
top: 43px;
left: 0;
color: #4e4e4e;
text-align: center;
display: flex;
flex-direction: column; }
.sort-container .nav .fenlei li, .sort-container .nav .paixu li {
flex: 1;
background-color: #ddd;
width: 100%;
font-weight: bold;
height: 30px;
line-height: 30px;
padding-bottom: 3px;
padding-top: 3px;
font-size: 12px;
border-bottom: 1px solid #000; }
.sort-container .section {
width: 100%;
height: 100%;
background-color: #fff;
flex: 1; }
.sort-container .section ul {
width: 100%;
display: flex;
flex-direction: column; }
.sort-container .section ul .goodLi {
width: 100%;
margin-top: 12px;
color: #999;
padding: 3px 5px;
background-color: #f5f5f5; }
.sort-container .section ul .goodLi li {
display: flex; }
.sort-container .section ul .goodLi div.goodLeft {
flex: 1;
margin: 3px 0; }
.sort-container .section ul .goodLi div.goodLeft image {
width: 100%;
height: 80px; }
.sort-container .section ul .goodLi div.goodRight {
flex: 3;
padding: 6px;
color: #000; }
.sort-container .section ul .goodLi div.goodRight p.goodName {
font-size: 10px;
display: block; }
.sort-container .section ul .goodLi div.goodRight p.goodPrice {
padding: 3px 0;
font-size: 12px;
color: #cd0606;
display: block; }
.sort-container .section ul .goodLi div.goodRight p.goodPrice span.nowPrice {
font-size: 140%;
font-weight: bold; }
.sort-container .section ul .goodLi div.goodRight p.goodPrice del {
padding-left: 3px;
text-decoration: line-through; }
.sort-container .section ul .goodLi div.goodRight p.pingjia {
display: block;
font-size: 10px;
color: #999;
text-align: right; }
|
Page({
data: {
list:[],
listGood:[],
listMenu:[],
fenleiHidden:false,
paixuHidden:false,
activeHidden:true,
title:""
},
onLoad: function (options) {
var sortId=options.sortId;
var that=this;
wx.request({
url: 'http://localhost:81/mock/sort'+sortId+'.json',
header: {
'Content-Type': 'application/json'
},
success: function(res) {
that.setData({
list: res.data,
listGood:res.data
});
},
fail: function (error) {
console.log(error);
}
});
wx.request({
url: 'http://localhost:81/mock/sortMenu.json',
header: {
'Content-Type': 'application/json'
},
success: function(res) {
that.setData({
listMenu: res.data[sortId-1].sonMenu,
title:res.data[sortId-1].name
});
},
fail: function (error) {
console.log(error);
}
});
},
onReady:function(){
wx.setNavigationBarTitle({
title:this.data.title
})
},
switchPaixu:function(event){
var index=event.target.dataset.index;
switch (index) {
case "0":
this.data.listGood.sort(function(a,b){
if(parseInt(a.ProductSaleCount)<parseInt(b.ProductSaleCount)){
return 1;
}else{
return -1;
}
});
break;
case "1":
this.data.listGood.sort(function(a,b){
if(parseInt(a.ProductSaleCount)>parseInt(b.ProductSaleCount)){
return 1;
}else{
return -1;
}
});
break;
case "2":
this.data.listGood.sort(function(a,b){
if(parseInt(a.ProductSalePrice)<parseInt(b.ProductSalePrice)){
return 1;
}else{
return -1;
}
});
break;
case "3":
this.data.listGood.sort(function(a,b){
if(parseInt(a.ProductSalePrice)>parseInt(b.ProductSalePrice)){
return 1;
}else{
return -1;
}
});
break;
}
this.setData({
listGood: this.data.listGood,
fenleiHidden:false,
paixuHidden:false
});
},
switchSort:function(event){
var index=event.target.dataset.index;
var arr=[];
for(var i=0;i<this.data.list.length;i++){
if(parseInt(this.data.list[i].ProductId.substring(3,4))==index){
arr.push(this.data.list[i]);
}
}
this.setData({
listGood: arr,
fenleiHidden:false,
paixuHidden:false
})
},
changeShow:function(event){
var index=event.target.dataset.index;
var that=this;
console.log(index);
switch(index){
case "1":
this.setData({
fenleiHidden:!(that.data.fenleiHidden),
paixuHidden:false,
activeHidden:true
})
break;
case "2":
this.setData({
fenleiHidden:false,
paixuHidden:!(that.data.paixuHidden),
activeHidden:false
})
break;
}
}
});
|
模板简介：该模板名称为【微信小程序选择分类顺序下拉框样式设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
