小程序实现商品属性选择或规格选择
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了小程序实现商品属性选择或规格选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了小程序实现商品属性选择或规格选择的具体代码,供大家参考,具体内容如下
实现效果
1.wxml
<view wx:for="{{list}}" wx:key="index" wx:key="index" wx:for-index="childIndex" style="margin: 40px 0">
<view>{{item.name}}</view>
<view class="s" wx:for="{{item.option_value}}" wx:key="index" >
<text class="{{indexArr[childIndex] == index ? 'active':''}}" bindtap="choice" data-fid="{{childIndex}}" data-id="{{index}}">
{{item.name}}
</text>
</view>
</view>
2.js
data: {
//数据
list: [
{
"goods_option_id": 1737,
"option_id": 1737,
"name": "冰度",
"option_value": [
{
"goods_option_value_id": 3606,
"option_value_id": 3606,
"name": "正常冰",
"image": "xxxxxx.png"
},
{
"goods_option_value_id": 3605,
"option_value_id": 3605,
"name": "少冰",
"image": "xxxxxx.png"
},
{
"goods_option_value_id": 3604,
"option_value_id": 3604,
"name": "热饮",
"image": "xxxxxx.png"
}
]
},
{
"goods_option_id": 1738,
"option_id": 1738,
"name": "糖度",
"option_value": [
{
"goods_option_value_id": 3608,
"option_value_id": 3608,
"name": "正常糖",
"image": "xxxxxx.png"
},
{
"goods_option_value_id": 3607,
"option_value_id": 3607,
"name": "少糖",
"image": "xxxxxx.png"
}
]
},
{
"goods_option_id": 1737,
"option_id": 1737,
"name": "冰度",
"option_value": [
{
"goods_option_value_id": 3606,
"option_value_id": 3606,
"name": "正常冰",
"image": "xxxxxx.png"
},
{
"goods_option_value_id": 3605,
"option_value_id": 3605,
"name": "少冰",
"image": "xxxxxx.png"
},
{
"goods_option_value_id": 3604,
"option_value_id": 3604,
"name": "热饮",
"image": "xxxxxx.png"
}
]
}
],
arr: [],
indexArr: []
},
choice(e) {
const fid = e.currentTarget.dataset.fid;
const id = e.currentTarget.dataset.id;
const arr = this.data.arr,
arr2 = this.data.indexArr;
arr[fid] = this.data.list[fid].option_value[id].name;
arr2[fid] = id;
this.setData({
arr: arr,
indexArr: arr2
})
},
onLoad: function (options) {
const res = this.data.indexArr;
this.data.list.forEach((e,i) => {
res[i] = 0;
this.setData({
indexArr: res
})
});
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:基于jquery实现轮播图效果
下一篇:js实现瀑布流布局(无限加载)
编程语言
- ThinkPad 笔记本如何调节LCD屏幕亮度
- Dreamweaver制作网页打开特效教程
- Win10 Mobile 10586升级后无限重启怎么办 硬重启帮您
- Win8系统提示音频设备有问题有一个或多个音频服
- Xbox One版Win10首个预览版9月份发布
- 如何在textarea文本输入区内实现换行
- Win10 Build 9901系统更新 预览版新版本下载
- McAfee Framework存在远程格式串处理漏洞
- Win10家庭版今日(7月30)正式在中国官方商城开卖
- Win10 Mobile预览版更新完10536.1000后才收到10536.100
- Win10 RS2更新了什么-Win10 RS2最终版本号1704首曝
- Windows7如何查看回收站对应的文件夹有哪些方法
- Win10让Charms栏回归桌面的方法教程
- 取消Windows XP系统开机启动画面的小技巧
- win8系统怎么下载安装USB百兆网卡?
- XP系统下磁盘空间变少了怎么办?XP系统磁盘空间