mobile-frame-h5-example/pages/componentsA/slider/index.vue

<template>
	<view class="u-demo">
		<view class="u-demo-wrap">
			<view class="u-demo-title">演示效果</view>
			<view class="u-demo-area">
				<u-toast ref="uToast"></u-toast>
				<u-slider :step="step" :height="height" :block-width="blockWidth" 
					:active-color="activeColor" :value="30" 
					:use-slot="useSlot" v-model="value"
					:min="min" :max="max" 
					@end="end"
					@moving="moving"
				>
					<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
					<view class="" v-if="useSlot">
						<view class="badge-button">
							{{value}}
						</view>
					</view>
					<!-- #endif -->
				</u-slider>
				<view class="u-demo-result-line">
					滑块值：{{value}}
				</view>
			</view>
		</view>
		<view class="u-config-wrap">
			<view class="u-config-title u-border-bottom">参数配置</view>
			<view class="u-config-item">
				<view class="u-item-title">自定义颜色</view>
				<u-subsection :list="['primary', 'warning', 'error', 'success']" @change="typeChange"></u-subsection>
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<view class="u-config-item">
				<view class="u-item-title">自定义传入内容</view>
				<u-subsection current="1" :list="['是', '否']" @change="slotChange"></u-subsection>
			</view>
			<!-- #endif -->
			<view class="u-config-item">
				<view class="u-item-title">自定义尺寸</view>
				<u-subsection current="1" :list="['是', '否']" @change="sizeChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">步进值</view>
				<u-subsection :list="['1', '10', '20']" @change="stepChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">最大最小值</view>
				<u-subsection :list="['0-100', '40-80']" @change="minMaxchange"></u-subsection>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 30,
				useSlot: false,
				setp: 1,
				activeColor: '#2979ff',
				height: 6,
				blockWidth: 30,
				step: 1,
				min: 0,
				max: 100
			};
		},
		onLoad() {
			
		},
		computed: {
			current() {
				return this.show ? 0 : 1;
			}
		},
		methods: {
			typeChange(index) {
				let type = ['primary', 'warning', 'error', 'success'];
				this.activeColor = this.$u.color[type[index]];
			},
			sizeChange(index) {
				if(index == 0) {
					this.height = 4;
					this.blockWidth = 30;
				} else {
					this.height = 6;
					this.blockWidth = 20;
				}
			},
			stepChange(index) {
				let arr = ['1', '10', '20'];
				this.step = arr[index];
			},
			slotChange(index) {
				this.useSlot = !index;
			},
			minMaxchange(index) {
				if(index == 0) {
					this.min = 0;
					this.max = 100;
				} else {
					this.min = 40;
					this.max = 80;
				}
			},
			end() {
				// console.log('end');
			},
			moving() {
				// console.log('moving');
			}
		}
	};
</script>

<style scoped lang="scss">
	.badge-button {
		padding: 4rpx 6rpx;
		background-color: $u-type-error;
		color: #fff;
		border-radius: 10rpx;
		font-size: 22rpx;
		line-height: 1;
	}
</style>