uniapp实现横向滚动效果(类似时间选择)

实现效果:

根据滑动可以把选择后的数据,放在蓝色框里,左右滑动都有震动的效果
需要的组件:scroll-view,wx.vibrateShort的震动效果,在手机上测试很nice

上代码

<template>
	<view class="content">
		<scroll-view scroll-x class="page" @scroll="scroll">
			<view class="num-content">
				<view class="num_page" v-for="(item,index) in numList" :key="index">
					{{ item }}
				</view>	
			</view>
		</scroll-view>
		<view class="fixed"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				numList: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20']
			}
		},
		methods: {
			scroll() {
				wx.vibrateShort({
					type: 'light',
					success: function(res) {
						console.log(res)
					}
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		width: 100%;
		overflow: hidden;
		.fixed {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			top: 0;
			left: 50%;
			background-color: rgba(30, 113, 255, 0.5);
		}
		.page {
			overflow: hidden;
			width: 100%;
			height: 60rpx;
			background-color: #fff;
			white-space:nowrap;
			
			.num-content {
				// 宽度是list的宽度加上两边的padding
				width: 1560rpx; // 60*20个 再加上两边的padding 
				display: flex;
				flex-wrap: nowrap;
				// 左右的padding可以根据所选的list的数量决定   
				padding-left: 360rpx; // 60*6 （7在中心位置）
				padding-right: 300rpx; // 60*6 - 60 （减去自己的宽度）
			}
			.num_page {
				display: inline-block;
				width: 60rpx;
				height: 60rpx;
				color: #212121;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>