This article shares the specific code for the WeChat mini program to realize the selection of specifications and color effects of shopping carts for your reference. The specific content is as follows
wxml:
<view>
<view>Specification：</view>
<view class='dis'>
<block wx:for="{{guige}}">
<view class="{{gindex==index?'color':''}}" bindtap='guige' data-index='{{}}' data-current='{{index}}'>{{}}</view>
</block>
</view>
<view>color：</view>
<view class='dis'>
<block wx:for="{{color}}">
<view class="{{cindex==index?'color':''}}" bindtap='color' data-index='{{}}' data-current='{{index}}'>{{}}</view>
</block>
</view>
</view>
<view>{{guige[gindex].name}}:{{color[cindex].name}}</view>js:
// pages/guige/
Page({
/**
* Initial data of the page
*/
data: {
guige:[
{id:1,name:'M'},
{id:2,name:'L'},
{id:3,name:'X'},
{id:4,name:'S'}
],
color:[
{id:5,name:'red'},
{ id: 6, name: 'orange'},
{ id: 7, name: 'yellow'},
{ id: 8, name: 'green'}
]
},
guige:function(e){
({
gid: ,
gindex: ,
})
},
color:function(e){
({
cid: ,
cindex: ,
})
},
/**
* Lifecycle function-listen to page load
*/
onLoad: function (options) {
},
/**
* Lifecycle function--the first rendering of the listening page is completed
*/
onReady: function () {
},
/**
* Lifecycle function--listening page display
*/
onShow: function () {
},
/**
* Lifecycle function--listening page hidden
*/
onHide: function () {
},
/**
* Lifecycle function-listening page uninstall
*/
onUnload: function () {
},
/**
* Page-related event handling function-listen to user pull-down actions
*/
onPullDownRefresh: function () {
},
/**
* Handling function of bottoming event on the page
*/
onReachBottom: function () {
},
/**
* User clicks to share
*/
onShareAppMessage: function () {
}
})css:
.color{
color: red
}
.dis{display: flex;justify-content: space-around}The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.