本文例項為大家分享了微信小程式實現購物車選擇規格顏色效果的具體程式碼，供大家參考，具體內容如下

wxml:

<view>
 <view>規格：</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({

 /**
 * 頁面的初始資料
 */
 data: {
  guige:[
   {id:1,name:'M'},{id:2,name:'L'},{id:3,name:'X'},{id:4,name:'S'}
  ],color:[
   {id:5,name:'紅'},http://www.cppcns.com   { 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,/**
 * 生命週期函式-http://www.cppcns.com
 
-監聽頁面載入
 */
 onLoad: function (options) {

 },/**
 * 生命週期函式--監聽頁面初次渲染完成
 */
 onReady: function () {

 },/**
 * 生命週期函式--監聽頁面顯示
 */
 onShow: function () {

 },/**
 * 生命週期函式--監聽頁面隱藏
 */
 onHide: function () {

 },/**
 * 生命週期函式--監聽頁面解除安裝
 */
 onUnload: function () {

 },/**
 * 頁面相關事件處理函式--監聽使用者下拉動作
 */
 onPullDownRefresh: function () {

 },/**
 * 頁面上拉觸底事件的處理函式
 */
 onReachBottom: function () {

 },/**
 * 使用者點選右上角分享
 */
 onShareAppMessage: function () {

 }
})

:

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。