微信小程序 选择商品属性功能

微信小程序 选择商品属性功能

展示效果

wxml

<view class='info-input'>
      <view class='info-input-line'>
        <view class='info-input-line-title'><text class='redStar' decode='true'>&nbsp;&nbsp;</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
    });
  }
})