uni-app中如何实现自定义的时间段选择器
具体的实现方法就是使用小程序中的picker-view组件注意:pop是我引入的一个弹窗组件<pop ref="pops" :direction="directions" :is_close="true" :is_mask="true" :width="100"><picker-view v-if="visible" :indicator-style="indicatorStyl
·
具体的实现方法就是使用小程序中的picker-view组件 https://uniapp.dcloud.io/component/picker-view
注意:pop是我引入的一个弹窗组件
<pop ref="pops" :direction="directions" :is_close="true" :is_mask="true" :width="100">
<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view" mask-style="width: 80rpx;">
<picker-view-column >
<view class="item" v-for="(item,index) in popleft" :key="index">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in popright" :key="index">{{item}}</view>
</picker-view-column>
</picker-view>
<view class="btns"@click="onsuer">确定</view>
</pop>
export default {
components: {
pop
},
data() {
let popright = ['立即上门','00.00-01.00','01.00-02.00','02.00-03.00','03.00-04.00','04.00-05.00','05.00-06.00','06.00-07.00','07.00-08.00','08.00-09.00','09.00-10.00','10.00-11.00','11.00-12.00','12.00-13.00','13.00-14.00','14.00-15.00','15.00-16.00','16.00-17.00','17.00-18.00','18.00-19.00','19.00-20.00','20.00-21.00','21.00-22.00','22.00-23.00','23.00-24.00']
return{
value: [0,0],
indicatorStyle: `height: 50px;`,
popleft:['今天','明天'],
visible: true,
popright:popright,
}
},
methods:{
bindChange: function (e) {
console.log(e,'----126---')
},
}
}
style
<style scoped lang="less">
.picker-view {
width: 100%;
height: 255rpx;
margin-top: 20rpx;
}
.item {
height: 77rpx;
line-height: 77rpx;
align-items: center;
justify-content: center;
text-align: center;
}
.btns{
width: 100%;
height: 98rpx;
line-height: 98rpx;
background: #FFD508;
font-size: 42rpx;
font-family: PingFangSC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
margin-top: 20rpx;
}
</style>
关于里面pop弹窗的组件 具体是这个https://ext.dcloud.net.cn/plugin?id=2716 用其他的也行 比如uview的弹出层都可以
里面的东西其实都可以变化 比如只想用单列那么就只循环一个就行了注意数据的循环。如果有不懂的可以留言。
现可以接单,有需要的可以私聊或者加QQ1615313820
更多推荐
已为社区贡献9条内容
所有评论(0)