微信小程序之多规格选择

这篇具有很好参考价值的文章主要介绍了微信小程序之多规格选择。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、多规格实现代码

1、index.wxss

.view1 {
  margin-left: 2%;
  margin-right: 2%;
}
.viewkey {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}
.view2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: 4%;
  margin-left: 4%;
}
.view2 view {
  border: 1rpx solid #d3d3d3;
  margin-right: 30rpx;
  padding-right: 20rpx;
  padding-left: 20rpx;
  border-radius: 10rpx;
}

2、 index.wxml

<view class="view1">
  <block wx:for="{{sizes}}" wx:key="index" wx:for-index="index1">
      <view class="viewkey">{{item.key}}</view>
      <view class="view2">
          <block wx:for="{{item.sizeList}}" wx:for-item="items">
              <view style="color: {{items.state?(items.disState?'#000':'white'):items.disState?'#000':'#000'}};background-color: {{items.state?(items.disState?'#D3D3D3':'red'):items.disState?'#D3D3D3':'white'}}; pointer-events: {{items.disState?'none':''}};" bindtap="selectValue" data-value="{{items.value}}" data-key="{{item.key}}" data-index1="{{index1}}" data-selectvale="{{item.selectValue}}" data-index="{{index}}">{{items.value}}</view>
          </block>
      </view>
  </block>
</view>

3、index.js

// index.js
Page({
  data: {
      // 该商品所有规格组合列表
      sizeList:[
        {price:35,stock:8,priceId:1,sizeList:[
          {key:"重量",value:"五斤"},
          {key:"尺寸",value:"大号"},
          {key:"数量",value:"十个"},
          {key:"颜色",value:"白色"}]},
        {price:35,stock:8,priceId:2,sizeList:[
            {key:"重量",value:"五斤"},
            {key:"尺寸",value:"大号"},
            {key:"数量",value:"三十个"},
            {key:"颜色",value:"白色"}]},
        {price:35,stock:8,priceId:3,sizeList:[
              {key:"重量",value:"十五斤"},
              {key:"尺寸",value:"大号"},
              {key:"数量",value:"三十个"},
              {key:"颜色",value:"白色"}]},
        {price:70,stock:8,priceId:4,sizeList:[
          {key:"重量",value:"五斤"},
          {key:"尺寸",value:"特大号"},
          {key:"数量",value:"五十个"},
          {key:"颜色",value:"白色"}]},
        {price:75,stock:8,priceId:5,sizeList:[
          {key:"重量",value:"十斤"},
          {key:"尺寸",value:"大号"},
          {key:"数量",value:"五十个"},
          {key:"颜色",value:"土黄色"}]},
        {price:35,stock:8,priceId:6,sizeList:[
          {key:"重量",value:"十斤"},
          {key:"尺寸",value:"特大号"},
          {key:"数量",value:"十个"},
          {key:"颜色",value:"白色"}]},
        {price:35,stock:8,priceId:7,sizeList:[
            {key:"重量",value:"十五斤"},
            {key:"尺寸",value:"大号"},
            {key:"数量",value:"五十个"},
            {key:"颜色",value:"土黄色"}]},
        {price:35,stock:8,priceId:8,sizeList:[
              {key:"重量",value:"十斤"},
              {key:"尺寸",value:"大号"},
              {key:"数量",value:"五十个"},
              {key:"颜色",value:"土黄色"}]}
      ],
      // 商品所有规格列表
      sizes:[],
      // 筛选后规格组合列表
      newsize:[],
    },
    // 初始化数据 -----> 规格列表(sizes)
    getSize:function(){
      let sizeList=this.data.sizeList
      let sizes=this.data.sizes
     for(let i=0;i<sizeList.length;i++){
       for(let j=0;j<sizeList[i].sizeList.length;j++){
        let num=this.isKey(sizes,sizeList[i].sizeList[j].key);
        if(num==-1){
           let item={}
           item.key=sizeList[i].sizeList[j].key
           item.selectValue=""
           let items={}
           items.value=sizeList[i].sizeList[j].value
           items.state=false
           items.disState=false
           let sizeList1=[]
          sizeList1.push(items)
          item.sizeList=sizeList1
          sizes.push(item)
        }else{
          let num1=this.isValue(sizes[num].sizeList,sizeList[i].sizeList[j].value);
          if(num1==1){
            let item1={}
            item1.value=sizeList[i].sizeList[j].value
            item1.state=false
            item1.disState=false
            sizes[num].sizeList.push(item1)
          }
        }
       }
     }
     this.setData({
       sizes:sizes,
       newsize:this.data.sizeList
     })
    },
    // 判断规格名(是否存在) -----> key
    isKey:function(sizes,key){
      if(sizes.length==0){
        return -1;
      }else{
        for(let i=0;i<sizes.length;i++){
          if(sizes[i].key==key){
            return i
          }
        }
      }
      return -1;
    },
    // 判断规格名值(是否存在) -----> value
    isValue:function(sizes,values){
        for(let i=0;i<sizes.length;i++){
          if(sizes[i].value==values){
            return -1;
          }
        }
        return 1;
    },
    // 点击事件
    selectValue:function(e){
      let index1=e.currentTarget.dataset.index1
      let value=e.currentTarget.dataset.value
      let key=e.currentTarget.dataset.key
      let selectvale=e.currentTarget.dataset.selectvale
      let index=e.currentTarget.dataset.index
      let sizes=this.data.sizes
      // 判断是否点击同一个按钮
      if(selectvale == value && sizes[index1].key == key){
        // 取消按钮
        this.disSelect(sizes,value,key,index1,index)
      }else{
        // 点击按钮
        this.selectClick(sizes,value,key,index1)
      }
    },
    // 获取已选择数量
    getNum:function(sizes){
      let count=0;
        sizes.forEach(element => {
          if(element.selectValue != "" && element.selectValue.length > 0){
            count++;
          }
        });
        return count;
    },
    // 点击按钮
    selectClick:function(sizes,value,key,index1,unselect){
      var count=this.getNum(sizes)
      // 选择同行按钮---->(选中按钮数为1时,更改选中按钮为其他同行按钮) 
      if(count == 1 && sizes[index1].key == key && sizes[index1].selectValue != value){
        for(let i = 0;i < sizes[index1].sizeList.length; i++){
          if(sizes[index1].sizeList[i].value == sizes[index1].selectValue){
            sizes[index1].sizeList[i].state = false
            count = 0
            sizes[index1].selectValue = ""
            break
          }
        }
      }

      let newsize=[]
      let sizelist=[]
      // 判断是否第一次选择
      if(count < 1){
        sizelist=this.data.sizeList
      }else{
        sizelist=this.data.newsize
      }
      // console.log(sizelist)

      // 筛选符合条件的规格组合
      for(let i = 0;i < sizelist.length; i++){
        for(let j = 0;j < sizelist[i].sizeList.length; j++){
          if(sizelist[i].sizeList[j].key == key && sizelist[i].sizeList[j].value == value){
            newsize.push(sizelist[i])
          }
        }
      }
      // 全部按钮置为不可选 ----->disState表示是否可选(false表示可选)
      for(let i = 0;i < sizes.length; i++){
        for(let j = 0;j < sizes[i].sizeList.length; j++){
          sizes[i].sizeList[j].disState=true
        }
      }

      // 将符合条件的按钮置为可选
      for(let i = 0;i < sizes.length; i++){
        for(let j = 0;j < newsize.length; j++){
          for(let k = 0;k < newsize[j].sizeList.length; k++){
            if(newsize[j].sizeList[k].key == sizes[i].key){
              for(let h = 0;h < sizes[i].sizeList.length; h++){
                if(newsize[j].sizeList[k].value == sizes[i].sizeList[h].value){
                  sizes[i].sizeList[h].disState = false
                }
                // 保证一个按钮时同一行都可选
                if((count < 2 && unselect == true && index1 == i) || (count < 1 && index1 == i)){
                  sizes[i].sizeList[h].disState = false
                }
              }
            }
          }
        }
      }

      // 改变选中按钮颜色,state表示选中状态(true 表示选中)
      for(let i = 0;i < sizes.length; i++){
          if(sizes[i].key == key){
            for(let j = 0;j < sizes[i].sizeList.length; j++){
              if(sizes[i].sizeList[j].value == value){
                sizes[i].sizeList[j].state = true
                sizes[i].selectValue = value
              }
            }
          }
      }
      this.setData({
        sizes:sizes,
        newsize:newsize
      })
    },
    // 取消按钮
    disSelect:function(sizes,value,key,index1,index){
      // 取消按钮
        sizes[index1].selectValue = ""
        // 初始化数据----->当取消最后一个按钮时,所有的selectValue都是空字符串
        // 不会进入selectClick方法,需要初始化所有按钮的状态(state、disState)
        for(let i = 0;i < sizes.length; i++){
          for(let j = 0;j < sizes[i].sizeList.length; j++){
            sizes[i].sizeList[j].state = false
            sizes[i].sizeList[j].disState = false
          }
        }
        // 更新修改的数据
        // 更改newsize数据,改为未筛选前
        this.setData({
          sizes:sizes,
          newsize:this.data.sizeList
        })

        // 重新筛选
        for(let i = 0;i < sizes.length; i++){
          if(sizes[i].selectValue != "" && sizes[i].selectValue.length > 0){
            this.selectClick(sizes,sizes[i].selectValue,sizes[i].key,i,true)
          }
        }
    },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  onShow() {
    this.getSize()
  },

})

二、效果展示

小程序规格选择,微信小程序,小程序,前端

 三、总结

1、一个商品的规格组合以及规格都可以通过后端处理生成,也可以只处理规格组合,规格列表由前端处理生成。

2、本博客未考虑库存显示的场景,规格组合默认去除库存为零的情况。在选择完按钮后,可以通过newsize数组来获取价格和库存。

3、只实现了第一次选择时同行相互切换,多行还未实现(例如:选择15斤后,第二个按钮选择三十个,之后可切换三十个为十个)文章来源地址https://www.toymoban.com/news/detail-598294.html

到了这里,关于微信小程序之多规格选择的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序picker多列选择器

    微信官方文档的的案例数据是写死,而且代码阅读性特别差 下面是我参考官方案例写的一个多列选择器,数据是都 动态获取 的 这是一个二列的选择器,如果需要三列的可以稍加修改一下 一、wxml 二、js 选择器中的数据都是 动态获取 的,只要将数据转成跟 data 中的数据格式

    2024年02月11日
    浏览(45)
  • 【微信小程序】选择器组件picker

    picker组件是一种从底部向上弹起的滚动选择器。 在官方文档中,有提供五种类型的picker组件,如普通选择器,多列选择器,时间选择器,日期选择器和省市区选择器。 (猜测是,这些选择器时不同的且常用的某种类型,于是就产生固定的模版)。 而在写法上是这么写滴,

    2024年01月18日
    浏览(58)
  • 微信小程序树结构选择组件(优化源码)

    实现效果:     1.index.html 2.index.js 3.index.css 4.index.josn 5.页面引用 dataTree:树结构数据(数据结构可以源码中修改) checkrule:回显或设置默认选中的元素

    2024年02月16日
    浏览(40)
  • 微信小程序自定义日期选择器组件

    默认开始时间为当天 最大结束时间为当天 默认结束时间为开始时间的10后 wxml   js wxss

    2024年02月11日
    浏览(56)
  • 微信小程序,封装身高体重选择器组件

    wxml代码: scrollLeft 保证能选择到最小值和最大值 bounces 关闭ios的回弹效果,回弹之前会有显示复数和大于最大值的情况(也可以不关闭,设置例如:min = valmin?min:val) 6:间隔+刻度的宽度 +1 是额外加一个刻度,这样才完整。 index%5===0: 5的倍数为长刻度,否则为短刻度 wxs代码

    2024年02月12日
    浏览(52)
  • 在微信小程序使用picker实现日期选择

    而且选择开始时间后,选择结束时间,能够选择的日期不能比开始日期还要早。要实现以上效果可这样写: 在wxml中写

    2024年02月16日
    浏览(71)
  • 微信小程序组件 —— 带搜索功能的选择器

    微信小程序组件 —— 带搜索功能的选择器 效果 组件 search-picker 文件 wxml 文件: wxss 文件: 注:/colorui/icon.wxss 文件来自 ColorUI 。 js 文件: 使用 wxml 文件: js 文件: 参考:https://blog.csdn.net/cwin8951/article/details/116160189

    2024年02月16日
    浏览(38)
  • 在微信小程序中打开地图选择位置功能

    说真的,这是我第一次接触移动端的地图模块,一开始我真的一头雾水,感觉这个很难,但是通过不断的探索,在慢慢摸索中,一点一点搞懂了很多东西,还是很开心的,就想把我的经验分享给大家。希望能帮助到你们~ 需要用户授权,才能拿到当前位置。如果用户拒绝后,

    2024年02月09日
    浏览(46)
  • 微信小程序chooseImage无法唤起选择弹框

    用uniapp打包发布的H5,在浏览器、开发者工具、IOS和部分安卓里都正常,但在微信小程序原生的web-view里,鸿蒙系统下无法唤起选择弹框(之前是可以的,最近鸿蒙更新了一下2.0.0.230就不行了)。无论是使用uni.chooseImage、还是uni-file-picker,都没反应。 原因:无论是chooseImage还是

    2024年02月05日
    浏览(59)
  • 微信小程序--多种类型日期选择器(年月、月日...)

    这里写自定义目录标题 微信小程序--多种类型日期选择器(年月、月日...) 时间选择器(年月日) 时间选择器(年月) 时间选择器(年) 时间选择器(月日) 时间选择器(月) 时间选择器(日) 微信小程序–多种类型日期选择器(年月、月日…) 在业务开发的过程中,

    2024年01月21日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包