uniapp u-popup和picker-view实现带搜索框的选择器

最新推荐文章于 2024-06-18 09:45:45 发布

sun lover

最新推荐文章于 2024-06-18 09:45:45 发布

阅读量787

点赞数 1

文章标签： uni-app css javascript

本文链接：https://blog.csdn.net/wonderfulgood/article/details/136705170

版权

u-popup和picker-view实现带搜索框的选择器

1、template中

   <u-popup mode="bottom" :show="areaShow" zIndex="10080">
        <view class="selectBox">
            <view class="selectTitle">
                   <text class="cancel" @click="NOTIMEcloseUnit">取消</text>
                    <u-search></u-search>
                    <text class="ok cancel" @click="onClickConfirmUnitNOtime">确定</text>
            </view>
             <picker-view
                       :indicator-style="indicatorStyle"
                      :value="values"
                     @change="bindChange"
                     :immediate-change="true"
                     class="picker-view">
                       <picker-view-column style="text-align: center">
                           <view class="item" v-for="(item, index) in unitList" :key="index">{{ item.gradePart }}</view>
                       </picker-view-column>
                </picker-view>
            </view>
    </u-popup>

2、script

unitList: [
                  {
                             gradePart: '小学',
                             name: '1'
                     },
                     {
                             gradePart: '初中',
                             name '2'
                     },
                     {
                             gradePart: '高中',
                             name: '3'
                     }
             ],
values: [0],
  indicatorStyle: `height: 50px;`
 
 //方法
 bindChange(e){
 }

3、样式css

.selectBox {
        height: 845rpx;
        background: #ffffff;
        padding: 30rpx;
        position: relative;
        display: flex;
        flex-direction: column;
        .selectTitle {
                display: flex;
        }
}
.picker-view {
        height: 600rpx;
        margin-top: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
}