sisMobilePhone/components/tools/scroll-choose/scroll-choose.vue

<template>
	<view class="scroll-choose-all">
		<view class="middleLine"></view>
		<scroll-view class="scroll-choose" scroll-x="true" upper-threshold="5" lower-threshold="5" 
		:scroll-left="scrollLeftInit" show-scrollbar="false" @scroll="scroll" @scrolltoupper="upper" 
		@scrolltolower="lower" scroll-with-animation="true">
			<view class="scroll-con" :style="{width: scrollWid}">
				<view class="topLine">
					<view class="allLine" :style="{'marginRight': maginL + 'px'}" :class="item.type" v-for="(item,index) in scrollList" :key="index"></view>
				</view>
				<view class="bottomNum" :style="{'paddingLeft': allNumLeft}">
					<text class="allNum" :style="{width: (maginL + 2) * 10 + 'px',left: -((maginL + 2) * 5) + 'px'}" v-for="(item,index) in scrollNumList" :key="index">
						{{item}}
					</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'ScrollChoose',
		props: {
			//起始值和终止值差距不要过大，否则会影响页面性能(暂不支持设置小数)
			/**
			 * 初始值（注意：初始值应在起始值和终止值之间）
			 */
			scrollLeft: {
				type: Number,
				default: 0
			},
			/**
			 * 滚动区域起始值（注意：起始值不能大于终止值）
			 */
			scrollStart: {
				type: Number,
				default: 0
			},
			/**
			 * 滚动区域终止值
			 */
			scrollEnd: {
				type: Number,
				default: 100
			},
			/**
			 * 线间距
			 */
			maginL: {
				type: Number,
				default: 5
			},
		},
		data() {
			return {
				scrollList:[],
				scrollNumList:[],
				scrollWid: '100vw',
				scrollLeftInit: 0,
				allNumLeft: ''
			}
		},
		mounted() {
			this.init();
		},
		computed:{
			
		},
		methods: {
			init(){
				for(let i = this.scrollStart; i < (this.scrollEnd + 1); i++){
					let _line = {};
					if(i%5 == 0){
						if(i%10 == 0){
							this.scrollNumList.push(i);
							_line.type = 'LLine'
						}else{
							_line.type = 'MLine'
						}
					}else{
						_line.type = 'SLine'
					}
					this.scrollList.push(_line);
				}
				this.scrollWid = uni.upx2px(750) + (this.scrollEnd - this.scrollStart) * (this.maginL + 2)  + 'px';
				if(this.scrollStart % 10 != 0){
					if(this.scrollStart > 0){
						this.allNumLeft = (10 - this.scrollStart % 10) * (this.maginL + 2) + uni.upx2px(372) + 'px';
					}else{
						this.allNumLeft = Math.abs(this.scrollStart % 10) * (this.maginL + 2) + uni.upx2px(372) + 'px';
					}
				}
				setTimeout(()=>{
					this.setNowLeft();
				},100)
			},
			setNowLeft(){
				this.scrollLeftInit = (this.scrollLeft - this.scrollStart) * (this.maginL + 2);
			},
			upper: function(e) {
				setTimeout(()=>{
					this.$emit('scroll',this.scrollStart);
				},50)
			},
			lower: function(e) {
				setTimeout(()=>{
					this.$emit('scroll',this.scrollEnd);
				},50)
			},
			scroll: function(e) {
				this.$emit('scroll',Math.round(e.detail.scrollLeft/(this.maginL + 2)) + this.scrollStart);
			}
		}
	}
</script>

<style lang="scss">
@charset "UTF-8";
.scroll-choose-all{
	width: 750rpx;
	height: 70px;
	background: #f8f8f8;
	margin: 10px 0;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
	position: relative;
}
.middleLine{
	position: absolute;
	width: 4px;
	height: 40px;
	background: #83DC42;
	left: 375rpx;
	margin-left: -2px;
	z-index: 1;
}
.scroll-choose{
	width: 750rpx;
	height: 70px;
	.scroll-con{
		height: 70px;
		overflow: hidden;
		.topLine{
			height: 30px;
			padding: 0 372rpx;
		}
		.bottomNum{
			height: 30px;
			padding: 0 0 0 372rpx;
			width: 100%;
			// display: flex;
			// flex-wrap: nowrap;
			.allNum{
				display: inline-block;
				position: relative;
				// width: 70px;
				// left: -35px;
				text-align: center;
			}
		}
		.allLine{
			display: inline-block;
			// margin-right: 5px;
			width: 2px;
			background: #999;
			position: relative;
		}
		.allLine:last-child{
			margin-right: 0px !important;
		}
		.LLine{
			height: 30px;
		}
		.MLine{
			height: 20px;
			top: -10px;
		}
		.SLine{
			height: 15px;
			top: -15px;
		}
	}
}
</style>