【微信小程序packer 带搜索功能直接复制就能用】

RanShakaLove

已于 2023-08-31 11:13:22 修改

阅读量824

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： html5

于 2023-08-30 17:57:57 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44795810/article/details/132587638

微信小程序专栏收录该内容

5 篇文章

订阅专栏

本文详细描述了如何在微信小程序中使用WXML和WXSS创建一个包含日期选择器和搜索功能的组件，涉及数据绑定、事件处理和组件状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

，

wxml

<view class="date-background" wx:if="{{flag}}">
  <view class='date-gray-background' bindtap='hiddeDatePicker'></view>
  <view class='date-container'>
    <view class="transparent">
      <view class='date-confirm'>
        <view bindtap='hiddeDatePicker' style="color:#f60">取消</view>
        <input bindinput="bindKeyInput" type="text" class="searchInpt" style="width:220px" />
        <view bindtap='confirm' style="color:#12a3f5">确定</view>
      </view>
      <picker-view indicator-class="indicator" value="{{setValues}}" bindchange="bindChange" bindpickend="_bindpickend"
        immediate-change="{{true}}">
        <picker-view-column class="pickViewColumn">
          <text wx:for="{{list}}" wx:key="index" style="color:#000;line-height:46px;text-align:center;display:block"
            decode="{{true}}">{{item[labelKey]}}</text>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</view>
<view bindtap="showDatePicker" wx:else class="showPickerText">
  {{itemsValue && itemsValue.name ?itemsValue.name :'请选择'+label}}
</view>

wxss

.showPickerText{
  width: 240px;
  text-align: right;
}
.date-background {
  /* position: absolute; */
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;

}
.searchInpt{
  width: 220px;
  border: 1px solid #e5e5e5;
  height: 40px;
  border-radius: 5px;
  padding-left: 20px;

}
.date-gray-background {
  position: absolute;
  width: 100%;
  top: 0;
  background: rgba(0, 0, 0, .5);
  height: calc(100% - 500rpx);
}
.date-container {
  position: absolute;
  width: 100%;
  height: 900rpx;
  overflow: hidden;
  background: #fff;
  bottom:0;
  z-index: 1000;
}
 
.date-confirm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:0 20rpx;
  font-size:34rpx;
  line-height: 70rpx;
  padding-top:10px;
  color:var(--ThemeColor)
}
.pickViewColumn{
  height: 900rpx;
  /* margin-top: -300rpx; */
  /* text-align: center; */
 text-align: left;
}
.indicator{
height: 80rpx;
border: 1rpx solid #E5E8E8;
}

wxjs

Component({
  options: {
    // 在组件定义时的选项中启用多slot支持
    multipleSlots: true,

  },
  /**
   * 组件的属性列表
   */
  properties: {
    list: {
      type: Array,
      value: [],
    },
    value: {
      type: Number,
      value: 0,
    },
    label: {
      type: String,
      value: "",
    },
    labelKey: {
      type: String,
      value: "name",
    },
    labelValue: {
      type: String,
      value: "value",
    },

  },
  observers: {
    'list': function (params) {
      if (this.data.itemsCopy.length) return
      this.setData({
        itemsCopy: params
      })
    },
  },
  data: {
    flag: false,
    searchValue: "",
    setValues: [],
    selectIndex: "",
    itemsCopy: [],
    itemsValue: {},
  },
  /**
   * 组件的方法列表
   */
  methods: {
    search(e) {
      let self = this;
      self.triggerEvent("handleSearch", e.detail);
    },
    hiddeDatePicker() {
      this.setData({
        flag: !this.data.flag,
        searchValue: "",
      });
    },
    bindKeyInput(e) {
      this.setData({
        list: e.detail.value ? this.data.itemsCopy.filter(x => x.name.indexOf(e.detail.value) >= 0) : this.data.itemsCopy
      })
    },
    showDatePicker() {
      this.setData({
        flag: !this.data.flag,
      });
      this.getItems();
    },
    confirm() {
      let self = this;
      let item = self.data.list[self.data.selectIndex] ?
        self.data.list[self.data.selectIndex] :
        self.data.list[0];
      let selectIndex = self.data.selectIndex;
      this.setData({
        itemsValue: item
      })
      console.log("选中的值",item)
      this.triggerEvent("myevent", {
        name: item.name,
        item: item,
        selectIndex: selectIndex,
      });
      this.hiddeDatePicker()
    },
    bindChange(e) {
      this.setData({
        selectIndex: e.detail.value[0],
      });
    },
    getItems(e) {
      if(this.data.list.length && this.data.value){
        this.setData({
          setValues:[this.data.list.findIndex(x=>x[this.data.labelValue] == this.data.value) || 0]
        });
      }
    },
  },
});