? ? index? wxml
<button?class="btn"?bindtap="popup"?data-position="bottom">選擇商品</button>
<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"?></selector>
??</view>
</page-container>
index? js
//?index/index.js
Page({
??/**
???*?頁面的初始數(shù)據(jù)
???*/
??data:?{},
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面加載
???*/
??onLoad:?function?(options)?{
????this.selector()
??},
??selector()?{
????var?that?=?this
????//?頁面加載到詳情頁?獲取詳情頁要渲染的數(shù)據(jù)
????var?api?=?'公司AP無法展示奏夫，可以看下面的數(shù)據(jù)格式? 去寫一個(gè)假數(shù)據(jù)'
????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];?//修改數(shù)據(jù)結(jié)構(gòu)格式挑秉，改成鍵值對的方式，以方便和選中之后的值進(jìn)行匹配
????}
????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>
??<!--?商品信息?-->
??<view?class="top"?>
????<image?class="image"?src="{{skuListSelect.image?||?selectorListL.skuList[0].image?}}"></image>
????<view?class="money">
??????<view>￥{{skuListSelect.price?||?selectorListL.skuList[0].price?}}</view>
??????<view>庫存?{{skuListSelect.stock?||?selectorListL.skuList[0].stock?}}?件</view>
??????<view>已選：{{skuListSelect.value?||?selectorListL.skuList[0].value?}}</view>
????</view>
??</view>
??<!--?規(guī)格渲染?-->
??<scroll-view?scroll-y="true"?style="height:?500rpx;">
??<view?class="center">
????<!--?循環(huán)渲染規(guī)格里面的數(shù)據(jù)??渲染第一層的數(shù)據(jù)??wx:for-index="fuIndex"???父級(jí)的索引?
?????wx:for-item="item1"??渲染的item??重新命名防止沖突
?????-->
????<block?wx:for="{{selectorListL.specList}}"?wx:key="index"?wx:for-index="fuIndex"?wx:for-item="item1">
????<view>{{item1.name}}</view>
??????<!--?渲染規(guī)格下面的第二條數(shù)據(jù)?-->
??????<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}}</text>
????????</block>
??????</view>
????</block>
??</view>
</scroll-view>
??<!--?最下面的確認(rèn)按鈕?-->
??<view>
????<button?bindtap="affirm">確認(rèn)</button>
??</view>
</view>
組件? selector js
//?components/selector/selector.js
Component({
??/**
???*?組件的屬性列表
???*/
??properties:?{
????selectorListL:{
??????type:Object,
??????value:{},
????},
????skuList:{
??????type:Object,
??????value:{},
????},
????pitchOnList:{
??????type:Array,
??????value:[]
????}
??},
??/**
???*?組件的初始數(shù)據(jù)
???*/
??data:?{
????pitchOnList:?[],?//?被選中的值
????subIndex:?[0,?0],?//?選中的索引?0,0?默認(rèn)選中第一個(gè)
????skuListSelect:{},?//?選中的值
??},
??/**
???*?組件的方法列表
???*/
??methods:?{
????//?選中的內(nèi)容
????pitchOn(e){
??????var?that?=?this
??????let?fuindex?=?e.currentTarget.dataset.fuindex;?//?獲取第一個(gè)循環(huán)的index
??????let?ziindex?=?e.currentTarget.dataset.ziindex?//?獲取第二個(gè)循環(huán)的index
??????let?selectItem?=?e.currentTarget.dataset.select.name?//?當(dāng)前選中的數(shù)據(jù)
??????//?存放點(diǎn)擊的數(shù)據(jù)
??????var?pitchOnList?=?this.data.pitchOnList
??????that.setData({
????????[`pitchOnList[${fuindex}]`]?:?selectItem,
??????})
????wx.nextTick(
??????that.setData({
????????skuListSelect:?that.data.skuList[pitchOnList],
????????[`subIndex[${fuindex}]`]?:?ziindex
??????})
????)
????},
????//?確認(rèn)??把選中的數(shù)據(jù)返回
????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;
}
數(shù)據(jù)結(jié)構(gòu)1
數(shù)據(jù)結(jié)構(gòu)2
數(shù)據(jù)結(jié)構(gòu)3
