商品列表选择尺寸和颜色高亮，并且把选择的数据传递到下一个页面

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

需求：商品列表选择属性，给中的属性显示高亮，并且把选择的数据记录下来传递到下一个页面。

项目下载地址：点击去下载

效果图：

选择商品的属性会显示在下面的选择，点击去体验就把数据传给下一个页面

实现代码：

<!--index.wxml-->
<view class='userAvatarUrl'>
<open-data type="userAvatarUrl"></open-data></view>
<view class='userNickName'>
<open-data type="userNickName"></open-data></view>
<image class='search_icon' src='/img/search.png'></image>
<input class='search' placeholder-class='p_search' confirm-type='search' bindconfirm='search' bindinput='input_search' placeholder='商品搜索'></input>
<view class="centent" wx:for='{{list}}' wx:for-index='inx' wx:key=''>
  <view>
    <image class='img' src='/img/card.png'></image>

  </view>
  <view class='detail'>
    <view>货号:{{item.id}}</view>
    <view class='ddd'>尺寸:
      <view wx:for='{{item.size}}' wx:key=''>
        <text catchtap='click_size' style='background:{{item.status?"bisque":"#f2f2f2"}}' data-list_idx='{{inx}}' data-idx='{{index}}' data-item='{{item.txt}}'>{{item.txt}}</text>
      </view>
    </view>
    <view class='ddd'>颜色:
      <view wx:for='{{item.color}}' wx:key=''>
        <text catchtap='click_color' style='background:{{item.status?"bisque":"#f2f2f2"}}' data-list_idx='{{inx}}'  data-idx='{{index}}' data-item='{{item.txt}}'>{{item.txt}}</text>
      </view>
    </view>
    <view style='margin-top:20rpx'wx:if='{{item.sizeTxt}}'>选择:{{item.sizeTxt}},{{item.colorTxt}}</view>
    <view style='margin-top:20rpx'wx:else>选择:</view>
  </view>
  <view class='btn' catchtap='to_nav' data-item='{{item}}'>去体验</view>
</view>

js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    list: [{
      id: 'A02',
      color: [{
        status: false,
        txt: '粉色'
      }, {
        status: false,
        txt: '蓝色'
      }, {
        status: false,
        txt: '紫色'
      }],
      size: [{
        status: false,
        txt: '11'
      }, {
        status: false,
        txt: '22'
      }, {
        status: false,
        txt: '33'
      }]
    }, {
      id: 'A03',
      color: [{
        status: false,
        txt: '粉色'
      }, {
        status: false,
        txt: '蓝色'
      }, {
        status: false,
        txt: '紫色'
      }],
      size: [{
        status: false,
        txt: '11'
      }, {
        status: false,
        txt: '22'
      }, {
        status: false,
        txt: '33'
      }]
    }, {
      id: 'A04',
      color: [{
        status: false,
        txt: '粉色'
      }, {
        status: false,
        txt: '蓝色'
      }, {
        status: false,
        txt: '紫色'
      }],
      size: [{
        status: false,
        txt: '11'
      }, {
        status: false,
        txt: '22'
      }, {
        status: false,
        txt: '33'
      }]
    }, {
      id: 'A05',
      color: [{
        status: false,
        txt: '粉色'
      }, {
        status: false,
        txt: '蓝色'
      }, {
        status: false,
        txt: '紫色'
      }],
      size: [{
        status: false,
        txt: '11'
      }, {
        status: false,
        txt: '22'
      }, {
        status: false,
        txt: '33'
      }]
    }, {
      id: 'A06',
      color: [{
        status: false,
        txt: '粉色'
      }, {
        status: false,
        txt: '蓝色'
      }, {
        status: false,
        txt: '紫色'
      }],
      size: [{
        status: false,
        txt: '11'
      }, {
        status: false,
        txt: '22'
      }, {
        status: false,
        txt: '33'
      }]
    }]
  },
  to_nav(e) {
    var item = e.currentTarget.dataset.item;
    wx.navigateTo({
      url: '../logs/logs?obj='+JSON.stringify(item),
    })
  },
  //事件处理函数
  click_size: function(e) {
    console.log(e)
    var idx1 = e.currentTarget.dataset.idx;
    var item1 = e.currentTarget.dataset.item;
    var list_idx = e.currentTarget.dataset.list_idx;
    var list = this.data.list;
    var list_item;
    console.log('item', list_idx)
    list_item = list[list_idx].size
    list_item.forEach((item_list_item, index_list_item) => {
      this.setData({
        ['list[' + list_idx + '].size[' + index_list_item + '].status']: false,
      })
    })
    this.setData({
      ['list[' + list_idx + '].sizeTxt']: item1,
      ['list[' + list_idx + '].size[' + idx1 + '].status']: true,
    })
  },
  //事件处理函数
  click_color: function (e) {
    console.log(e)
    var idx1 = e.currentTarget.dataset.idx;
    var item1 = e.currentTarget.dataset.item;
    var list_idx = e.currentTarget.dataset.list_idx;
    var list = this.data.list;
    var list_item;
    console.log('item', list_idx)
    list_item = list[list_idx].color
    list_item.forEach((item_list_item, index_list_item) => {
      this.setData({
        ['list[' + list_idx + '].colorTxt']: item1,
        ['list[' + list_idx + '].color[' + index_list_item + '].status']: false,
      })
    })
    this.setData({
      ['list[' + list_idx + '].color[' + idx1 + '].status']: true,
    })
  },
  onLoad: function() {}
})

css

/**index.wxss**/
.userAvatarUrl{
  width: 80rpx;
  height: 80rpx;
  position: relative;
  left: 500rpx;
  top: 10rpx;
}
.userNickName{
  position: absolute;
  left: 600rpx;
  width: 80rpx;
  top: 20rpx;
  height: 80rpx;
}
page{
  background: #F7F7F7;
  font-size: 32rpx;
}
.search_icon{
  position: absolute;
  right: 86rpx;
  width: 34rpx;
  height: 34rpx;
  margin-top: 56rpx;
}
.search{
  background: white;
  margin: 0;
  margin-left: 4%;
  padding-left: 3%;
  margin-top: 30rpx;
  height: 84rpx;
  border-radius: 10rpx;
  width: 86%;
}
.p_search{
  margin-left:12rpx;
}

.centent{
  position: relative;
  display: flex;
  flex-direction: row;
  background: white;
  margin: 40rpx;
  padding: 20rpx;
}
.ddd{
  display: flex;
  flex-direction: row;
  margin-top: 10rpx;
}
.img{
  width: 160rpx;
  height: 160rpx;
  margin-top: 20rpx
}
.detail{
  margin-left: 20rpx;
}
text{
  margin-left: 20rpx;
  padding: 0 10rpx 0 10rpx;
  background: #f2f2f2;
}
.btn{
  padding:  0 10rpx 0 10rpx;
  border: 1px solid #d0d0d0;
  height: 50rpx;
  line-height: 50rpx;
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
}

下一个页面接收的js

//logs.js
Page({
  onLoad: function (e) {
    var obj = JSON.parse(e.obj)
    this.setData({
      ...obj
    })
  }
})

下一个页面接收的页面

<!--logs.wxml-->
<view class="container log-list">
size:{{sizeTxt}}
</view>
<view class="container log-list">
color:{{colorTxt}}
</view>
<view class="container log-list">
货号:{{id}}
</view>