微信小程序选择框（通用）

短命女 2022-12-11 11:25 265阅读 0赞

供自己之后参考

<view class="select-box">
    		<view class="select-current" catchtap="openClose">
    			<text class="current-name">{
       {defaultOption.name}}</text>
    		</view>
    		<view class="option-list" wx:if="{ {isShow}}" catchtap="optionTap">
    			<text class="option" wx:for="{ {options}}" wx:for-item="item" wx:key="index" wx:for-index="index" data-id="{ {item.id}}" data-name="{ {item.name}}">{
       {item.name}}
    			</text>
    		</view>
    	</view>

Component({ 
      properties: { 
        options: { 
          type: Array,
          value: []
        },
        defaultOption: { 
          type: Object,
          value: { }
        },
      },
      data: { 
        isShow: false,
      },
      methods: { 
        optionTap(e) { 
          let dataset = e.target.dataset
          this.setData({ 
            current: dataset,
            isShow: false
          });
          // 调用父组件方法，并传参
          this.triggerEvent("change", {  ...dataset })
        },
        openClose() { 
          this.setData({ 
            isShow: !this.data.isShow
          })
        },
      },
      pageLifetimes: { 
        show: function () { 
          console.log(this.data.options,'toolNametoolName');
          
        },
        hide: function () { 
          // 页面被隐藏
        },
        resize: function (size) { 
          // 页面尺寸变化
        }
      },
    })

.select-box { 
      position: relative;
      width: 100%;
      width: 200rpx;
      background: #3a3a3a;
      border-radius: 10rpx;
      opacity: 0.5;
      z-index: 100;
    }
    
    .select-current { 
      position: relative;
      width: 100%;
      padding: 0 10rpx;
      line-height: 70rpx;
      border: 1rpx solid #ddd;
      border-radius: 6rpx;
      box-sizing: border-box;
    }
    
    .select-current::after { 
      position: absolute;
      display: block;
      right: 16rpx;
      top: 30rpx;
      content: '';
      width: 0;
      height: 0;
      border: 10rpx solid transparent;
      border-top: 10rpx solid #999;
    }
    
    .current-name { 
      display: block;
      width: 85%;
      height: 100%;
      word-wrap: normal;
      overflow: hidden;
      font-size: 30rpx;
      color: #ffffff;
    }
    
    .option-list { 
      position: absolute;
      left: 0;
      top: 76rpx;
      width: 100%;
      padding: 12rpx 20rpx 10rpx 20rpx;
      border-radius: 6rpx;
      box-sizing: border-box;
      z-index: 99;
      box-shadow: 0rpx 0rpx 1rpx 1rpx rgba(0, 0, 0, 0.2) inset;
      background: #3a3a3a;
    }
    
    .option { 
      display: block;
      width: 100%;
      line-height: 70rpx;
      color: #ffffff;
    }
    
    .option:last-child { 
      border-bottom: none;
      padding-bottom: 0;
    }