<view>
? <view>規(guī)格：</view>
? <view class='dis'>
? ? <block wx:for="{{guige}}">
? ? ? <view class="{{gindex==index?'color':''}}" bindtap='guige' data-index='{{item.id}}' data-current='{{index}}'>{{item.name}}</view>
? ? </block>
? </view>
? <view>顏色：</view>
? <view class='dis'>
? ? <block wx:for="{{color}}">
? ? ? <view class="{{cindex==index?'color':''}}" bindtap='color' data-index='{{item.id}}' data-current='{{index}}'>{{item.name}}</view>
? ? </block>
? </view>
</view>
<view>{{guige[gindex].name}}:{{color[cindex].name}}</view>

// pages/guige/guige.js
Page({
?
? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
? ? guige:[
? ? ? {id:1,name:'M'},
? ? ? {id:2,name:'L'},
? ? ? {id:3,name:'X'},
? ? ? {id:4,name:'S'}
? ? ],
? ? color:[
? ? ? {id:5,name:'紅'},
? ? ? { id: 6, name: '橙'},
? ? ? { id: 7, name: '黃'},
? ? ? { id: 8, name: '綠'}
? ? ]
? },
? guige:function(e){
? ? this.setData({
? ? ? gid: e.currentTarget.dataset.index,
? ? ? gindex: e.currentTarget.dataset.current,
? ? })
? },
? color:function(e){
? ? this.setData({
? ? ? cid: e.currentTarget.dataset.index,
? ? ? cindex: e.currentTarget.dataset.current,
? ? })
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
? ?*/
? onLoad: function (options) {
??
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
? ?*/
? onReady: function () {
??
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
? ?*/
? onShow: function () {
??
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
? ?*/
? onHide: function () {
??
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
? ?*/
? onUnload: function () {
??
? },
?
? /**
? ?* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
? ?*/
? onPullDownRefresh: function () {
??
? },
?
? /**
? ?* 頁(yè)面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function () {
??
? },
?
? /**
? ?* 用戶點(diǎn)擊右上角分享
? ?*/
? onShareAppMessage: function () {
??
? }
})

.color{
? color: red
}
.dis{display: flex;justify-content: space-around}