小程序 封装的商品规格选择器
index wxml
<button class="btn" bindtap="popup" data-position="bottom">选择商品
<page-container // 微信自己退出的底部弹出
show="{{show}}"
duration="200"
position="{{position}}"
close-on-slide-down="{{false}}"
<view class="detail-page">
<selector ws:if="{{selectorList}}" skuList="{{skuList}}" selectorListL="{{selectorList}}" pitchOnList="{{pitchOnList}}" bindmyevent="myevent" >
index js
// index/index.js
Page({
/**
* 页面的初始数据
*/
data: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.selector()
},
selector() {
var that = this
// 页面加载到详情页 获取详情页要渲染的数据
var api = '公司AP无法展示，可以看下面的数据格式 去写一个假数据'
wx.request({
url: api,
data: {
productId: 123,
userId: 261,
partnerId: 0,
platform: 'miniProgram',
},
success(res) {
that.onLoadList(res.data.data)
that.setData({
selectorList: res.data.data
})
}
})
},
onLoadList(data) {
var skuList = data.skuList
var objSku = {}
for (var i in skuList) {
objSku[skuList[i].value] = skuList[i]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
}
this.setData({
skuList: objSku,
pitchOnList: skuList[0].value.split(',')
})
},
popup(e) {
const position = e.currentTarget.dataset.position
let customStyle = ''
let duration = this.data.duration
switch (position) {
case 'top':
case 'bottom':
customStyle = 'height: 80%;'
break
case 'right':
break
}
this.setData({
position,
show: true,
customStyle,
duration
})
},
myevent(e) {
console.log(e.detail.res);
this.setData({
show: false
})
},
})
index json
{
"usingComponents": {
"selector":"/components/selector/selector"
}
}
组件 selector wxml
<view class="selector">
<view class="close" catchtap="close">X
<view class="top" >
<image class="image" src="{{skuListSelect.image || selectorListL.skuList[0].image }}">
<view class="money">
￥{{skuListSelect.price || selectorListL.skuList[0].price }}
库存 {{skuListSelect.stock || selectorListL.skuList[0].stock }} 件
已选：{{skuListSelect.value || selectorListL.skuList[0].value }}
<scroll-view scroll-y="true" style="height: 500rpx;">
<view class="center">
<!-- 循环渲染规格里面的数据 渲染第一层的数据 wx:for-index="fuIndex" 父级的索引
wx:for-item="item1" 渲染的item 重新命名防止冲突
-->
<block wx:for="{{selectorListL.specList}}" wx:key="index" wx:for-index="fuIndex" wx:for-item="item1">
{{item1.name}}
<view class="flexView">
<block wx:for="{{item1.list}}" wx:key="index" wx:for-index="ziIndex" wx:for-item="item2">
<text class="item2 {{subIndex[fuIndex] == ziIndex?'item2Class':''}}"bindtap="pitchOn" data-select="{{item2}}" data-fuindex="{{fuIndex}}"data-ziindex="{{ziIndex}}"
>{{item2.name}}
<button bindtap="affirm">确认
组件 selector js
// components/selector/selector.js
Component({
/**
* 组件的属性列表
*/
properties: {
selectorListL:{
type:Object,
value:{},
},
skuList:{
type:Object,
value:{},
},
pitchOnList:{
type:Array,
value:[]
}
},
/**
* 组件的初始数据
*/
data: {
pitchOnList: [], // 被选中的值
subIndex: [0, 0], // 选中的索引 0,0 默认选中第一个
skuListSelect:{}, // 选中的值
},
/**
* 组件的方法列表
*/
methods: {
// 选中的内容
pitchOn(e){
var that = this
let fuindex = e.currentTarget.dataset.fuindex; // 获取第一个循环的index
let ziindex = e.currentTarget.dataset.ziindex // 获取第二个循环的index
let selectItem = e.currentTarget.dataset.select.name // 当前选中的数据
// 存放点击的数据
var pitchOnList = this.data.pitchOnList
that.setData({
[
pitchOnList[${fuindex}]] : selectItem,})
wx.nextTick(
that.setData({
skuListSelect: that.data.skuList[pitchOnList],
[
subIndex[${fuindex}]] : ziindex})
)
},
// 确认 把选中的数据返回
affirm(){
this.triggerEvent('myevent',{res:this.data.skuList[this.data.pitchOnList]})
},
close(){
this.affirm()
},
}
})
组件 selector json
{
"component": true,
"usingComponents": {}
}
组件 selector wxss
/* components/selector/selector.wxss */
page{
background-color: #f7f7f7;
}
.selector{
margin: 20rpx 30rpx;
background-color: #fff;
padding: 15rpx;
}
.image{
width: 200rpx;
height: 200rpx;
}
.top{
display: flex;
}
.flexView{
display: flex;
flex-wrap:wrap;
}
.item2{
padding: 15rpx 10rpx;
border: 1rpx solid #ccc;
border-radius: 5rpx;
margin: 10rpx;
}
.item2Class{
border: 1rpx solid #3399ff;
}
.close{
position: absolute;
top: 30rpx;
right: 30rpx;
}
\
数据结构1
数据结构2
数据结构3
作者：黑云
链接：https://juejin.cn/post/7023948415583125517