请添加图片描述
具体的实现方法就是使用小程序中的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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐