小程序 封装的商品规格选择器

    index  wxml

选择商品

  show="{{show}}"

  duration="200"

  position="{{position}}"

  close-on-slide-down="{{false}}"

>

  

    

  

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

  X

  

  

    

    

      ￥{{skuListSelect.price || selectorListL.skuList[0].price }}

      库存 {{skuListSelect.stock || selectorListL.skuList[0].stock }} 件

      已选：{{skuListSelect.value || selectorListL.skuList[0].value }}

    

  

  

  

  

    

    

    {{item1.name}}

      

      

        

          

          >{{item2.name}}

        

      

    

  

  

  

    确认

  

组件  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