微信小程序 选择商品属性功能
展示效果
wxml
<view class='info-input'>
<view class='info-input-line'>
<view class='info-input-line-title'><text class='redStar' decode='true'> </text>属性</view>
<view class='input-line' bindtap="closeAttr">
<view class='showOneLine {{submitData.attr ? "" : "specifications"}}'>{{submitData.attr ? submitData.attr : "请选择属性"}}</view>
</view>
</view>
</view>
<view class='mask' bindtap="closeAttr" hidden="{{closeAttr}}" catchtouchmove="touchmove"></view>
<view class="attrAlert" hidden="{{closeAttr}}" catchtouchmove="touchmove">
<view class='attrContent'>
<picker range='{{attrButton}}' range-key="title" bindchange="changeAttrTitle">
<view class='attr-head'>
<view class='attr-key'>
<text>{{attrButton[attrI].title}}</text>
<image src='/images/down_ed.png'></image>
</view>
</view>
</picker>
<view class='attr-items'>
<view class='{{attrButton[attrI].item[index].choose ? "attr-itemed":"attr-item"}}' wx:for="{{attrButton[attrI].item}}" bindtap='chooseAttr' data-index='{{index}}'>{{attrButton[attrI].item[index].title}}</view>
</view>
</view>
</view>
wxss
.info-input{
width: 100%;
height: 108rpx;
}
.info-input-line{
width: 85%;
margin: 0 auto;
display: flex;
align-items: center;
height: 100%;
font-size: 28rpx;
border-bottom: 1px solid #DDDDDD;
}
.info-input-line-title{
width: 30%;
}
.input-line{
width: 70%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.specifications{
color:#16B59F;
}
.showOneLine{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.attrAlert{
width: 600rpx;
height: 423rpx;
position: fixed;
top: 50%;
left: 0;
right: 0;
z-index: 9999;
margin: -300rpx auto;
background-color: #fff;
border-radius: 36rpx;
display: flex;
box-shadow: 3rpx 3rpx 0.5rpx 0.3rpx #BEBEBE;
align-items: center;
justify-content: center;
}
.mask{
width:100%;
height:100%;
position:fixed;
background-color:#999;
z-index:9999;
top:0;
left:0;
opacity:0.5;
overflow: hidden;
}
.attrContent{
width: 80%;
height: 80%;
}
.attr-head{
width:100%;
height: 100rpx;
border:1rpx solid #DDDDDD;
display: flex;
align-items: center;
justify-content: center;
}
.attr-key{
font-size: 28rpx;
color:#221814;
display: flex;
width: 90%;
justify-content: space-between;
align-items: center;
}
.attr-key image{
width: 30rpx;
height: 18rpx;
}
.attr-items{
width: 100%;
height: 230rpx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap:wrap;
}
.attr-item{
width: 158rpx;
height: 72rpx;
border:1rpx solid #DDDDDD;
border-radius: 16rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
margin: 0 20rpx;
}
.attr-itemed{
width: 158rpx;
height: 72rpx;
border:1rpx solid #16B59F;
border-radius: 16rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
margin: 0 20rpx;
color:white;
background-color:#16B59F;
}
js
Page({
/**
* 页面的初始数据
*/
data: {
attrButton: [
{
title: '方向',
choose: false,
item: [
{ title: '上', choose: false },
{ title: '下', choose: false },
{ title: '左', choose: false },
{ title: '右', choose: false }
]
},
{
title: '大小',
choose: false,
item: [
{ title: '大', choose: false },
{ title: '小', choose: false }
]
}
],
attrI: 0,
closeAttr:true
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
closeAttr() {
this.setData({
closeAttr: this.data.closeAttr ? false : true
});
},
touchmove() { },
chooseAttr(e) {
const attrbut = this.data.attrButton;
const attrI = this.data.attrI;
let attrIndex = e.currentTarget.dataset.index;
let attr = 'attrButton[' + attrI + '].item[' + attrIndex + '].choose';
this.setData({
[attr]: attrbut[attrI].item[attrIndex].choose ? false : true
});
let chooseItems = 0;
for (let i in attrbut[attrI].item) {
if (attrbut[attrI].item[i].choose) {
chooseItems++;
}
}
let but = 'attrButton[' + attrI + '].choose';
this.setData({
[but]: chooseItems > 0 ? true : false
});
let attrchoose = '';
for (let j in attrbut) {
if (attrbut[j].choose) {
attrchoose += attrbut[j].title + ':'
}
for (let z in attrbut[j].item) {
if (attrbut[j].item[z].choose) {
attrchoose += attrbut[j].item[z].title + ','
}
}
attrchoose = attrchoose.substring(0, attrchoose.length - 1);
if (attrbut[j].choose) {
attrchoose += ';'
}
}
if (attrchoose.substring(attrchoose.length - 1) == ';') {
attrchoose = attrchoose.substring(0, attrchoose.length - 1);
}
let dataAttr = 'submitData.attr';
this.setData({
[dataAttr]: attrchoose
});
},
changeAttrTitle(e) {
this.setData({
attrI: e.detail.value
});
}
})