• 微信小程序 实现滑块是矩形的slider组件

    我发现大多数前端UI库都是圆形的滑块，而且圆形的滑块都没有紧贴进度条，都是超出了首尾端，所以亲自写一个矩形的滑块，我使用了微信小程序的wxs的事件通信写法，官方说这样写好，也不知道好哪里了。样式如下图：

    js

    1. // components/slider/index.js
    2. Component({
    3. 	// 启用插槽
    4. 	options: {
    5. 		multipleSlots: true
    6. 	},
    7. 	/**
    8. 	 * 组件的属性列表
    9. 	 */
    10. 	properties: {
    11.  
    12. 		disabled: {
    13. 			type: Boolean,
    14. 			value: false,
    15. 			observer(val, oldVal) {
    16. 				if (val !== this.value) {
    17. 					this.setData({
    18. 						['propValue.disabled']: val
    19. 					})
    20. 				}
    21. 			},
    22. 		},
    23. 		max: {
    24. 			type: Number,
    25. 			value: 100,
    26. 			observer(val, oldVal) {
    27. 				if (val !== this.value) {
    28. 					this.setData({
    29. 						['propValue.max']: val
    30. 					})
    31. 				}
    32. 			},
    33. 		},
    34. 		min: {
    35. 			type: Number,
    36. 			value: 0,
    37. 			observer(val, oldVal) {
    38. 				if (val !== this.value) {
    39. 					this.setData({
    40. 						['propValue.min']: val
    41. 					})
    42. 				}
    43. 			},
    44. 		},
    45. 		step: {
    46. 			type: Number,
    47. 			value: 1,
    48. 			observer(val, oldVal) {
    49. 				if (val !== this.value) {
    50. 					this.setData({
    51. 						['propValue.step']: val
    52. 					})
    53. 				}
    54. 			},
    55. 		},
    56. 		value: {
    57. 			type: null,
    58. 			value: 0,
    59. 			observer(val, oldVal) {
    60. 				if (val !== this.value) {
    61. 					this.setData({
    62. 						['propValue.value']: val
    63. 					})
    64. 				}
    65. 			},
    66. 		}
    67. 	},
    68.  
    69. 	/**
    70. 	 * 组件的初始数据
    71. 	 */
    72. 	data: {
    73. 		propValue: {
    74. 			disabled: null,
    75. 			max: null,
    76. 			min: null,
    77. 			step: null,
    78. 			value: null
    79. 		}
    80. 	},
    81. 	lifetimes: {
    82. 		attached() {
    83. 			this.data.propValue.disabled = this.data.disabled;
    84. 			this.data.propValue.max = this.data.max;
    85. 			this.data.propValue.min = this.data.min;
    86. 			this.data.propValue.step = this.data.step;
    87. 			this.data.propValue.value = this.data.value;
    88. 			this.setData({
    89. 				propValue: this.data.propValue
    90. 			})
    91. 		}
    92. 	},
    93.  
    94. 	/**
    95. 	 * 组件的方法列表
    96. 	 */
    97. 	methods: {
    98. 		setVal(val) {
    99. 			// this.setData({
    100. 			// 	value: val
    101. 			// })
    102. 		}
    103. 	}
    104. })

    wxml

    2. <wxs module="computed" src="./index.wxs">wxs>
    3.  
    4.  
    5. <view class="n-slider {{disabled?'n-slider__disabled':''}}" change:prop="{{computed.propObserver}}" prop="{{propValue}}" bind:tap="{{computed.onClick}}" bind:touchstart="{{computed.onTouchStart}}" catch:touchmove="{{computed.onTouchMove}}" bind:touchend="{{computed.onTouchEnd}}" bind:touchcancel="{{computed.onTouchEnd}}">
    6.  
    7. 	<view class="n-slider-rail">
    8.  
    9.  
    10. 		<view class="n-slider-rail__fill">view>
    11.  
    12. 		<view class="n-slider-handles">
    13. 			<view class="n-slider-handle-wrapper">
    14.  
    15. 				<view class="n-slider-handle">
    16. 					<slot>slot>
    17. 				view>
    18.  
    19.  
    20. 			view>
    21. 		view>
    22. 	view>
    23. view>

    wxs 

    1. var DRAG_STATUS = {
    2. 	START: 'start',
    3. 	MOVING: 'moving',
    4. 	END: 'end',
    5. };
    6.  
    7. var dragStatus = DRAG_STATUS.START;
    8.  
    9.  
    10. var propValue = {
    11. 	disabled: false,
    12. 	max: 100,
    13. 	min: 0,
    14. 	step: 1,
    15. 	value: 0
    16. }
    17.  
    18. var newValue;
    19.  
    20.  
    21. function onTouchStart(event, ins) {
    22.  
    23.  
    24. 	var disabled = propValue.disabled;
    25. 	if (disabled) {
    26. 		return;
    27. 	}
    28.  
    29. 	newValue = propValue.value;
    30. 	dragStatus = DRAG_STATUS.START;
    31. }
    32.  
    33.  
    34. function onTouchMove(event, ins) {
    35.  
    36. 	var disabled = propValue.disabled;
    37. 	if (disabled) {
    38. 		return;
    39. 	}
    40.  
    41. 	if (dragStatus === DRAG_STATUS.START) {
    42. 		ins.triggerEvent('drag-start');
    43. 	}
    44.  
    45. 	dragStatus = DRAG_STATUS.MOVING;
    46.  
    47. 	var touch = event.touches[0];
    48. 	var rect = ins.selectComponent('.n-slider-handles').getBoundingClientRect();
    49. 	var percentage = (touch.clientX - rect.left) / rect.width;
    50.  
    51. 	newValue = percentageToValue(percentage);
    52. 	updateValue(ins, newValue, false, true);
    53. }
    54.  
    55.  
    56. function onTouchEnd(event, ins) {
    57. 	var disabled = propValue.disabled;
    58. 	if (disabled) {
    59. 		return;
    60. 	}
    61. 	if (dragStatus === DRAG_STATUS.MOVING) {
    62. 		dragStatus = DRAG_STATUS.END;
    63. 		updateValue(ins, newValue, true);
    64. 		ins.triggerEvent('drag-end');
    65. 	}
    66.  
    67.  
    68. }
    69.  
    70. function onClick(event, ins) {
    71. 	var disabled = propValue.disabled;
    72. 	if (disabled) {
    73. 		return;
    74. 	}
    75.  
    76. 	var touch = event.touches[0];
    77. 	var rect = ins.selectComponent('.n-slider-handles').getBoundingClientRect();
    78. 	var percentage = (touch.clientX - rect.left) / rect.width;
    79. 	updateValue(ins, percentageToValue(percentage), true);
    80.  
    81. }
    82.  
    83. /**
    84.  * 限制拖动值不能超出最小和最大范围
    85.  * @param value 
    86.  */
    87. function format(value) {
    88.  
    89. 	return Math.round(Math.max(propValue.min, Math.min(value, propValue.max)) / propValue.step) * propValue.step;
    90. }
    91.  
    92.  
    93. /**
    94.  * 
    95.  * @param ins 
    96.  * @param val 不能和value重复
    97.  * @param end 
    98.  * @param drag 
    99.  */
    100. function updateValue(ins, val, end, drag) {
    101. 	value = format(val);
    102. 	ins.selectComponent('.n-slider-handle-wrapper').setStyle({
    103. 		"left": getOffsetWidth(value),
    104. 		"transition": drag ? "none" : "all .2s"
    105. 	});
    106.  
    107. 	ins.selectComponent('.n-slider-rail__fill').setStyle({
    108. 		"width": getOffsetWidth(value),
    109. 		"transition": drag ? "none" : "all .2s"
    110. 	});
    111.  
    112. 	if (drag) {
    113. 		ins.triggerEvent('drag', {
    114. 			value: value
    115. 		});
    116. 	}
    117. 	if (end) {
    118.  
    119. 		ins.triggerEvent('change', value);
    120. 	}
    121. 	if (drag || end) {
    122. 		// ins.callMethod('setVal', value);
    123.  
    124. 	}
    125. }
    126.  
    127.  
    128. function getScope() {
    129. 	return Number(propValue.max) - Number(propValue.min);
    130. }
    131.  
    132.  
    133. function getOffsetWidth(current) {
    134. 	var scope = getScope();
    135. 	// 避免最小值小于最小step时出现负数情况
    136. 	return "".concat(Math.max(((current - Number(propValue.min)) * 100) / scope, 0), "%");
    137. }
    138.  
    139.  
    140. function percentageToValue(percentage) {
    141. 	return propValue.min + (propValue.max - propValue.min) * percentage
    142. }
    143.  
    144. function propObserver(newValue, oldValue, ownerInstance, instance) {
    145.  
    146. 	//这里判断一下newValue.value是否等于0，否则等于0的情况下不会执行这里
    147. 	if (newValue.value || newValue.value === 0) {
    148. 		propValue = newValue;
    149. 		updateValue(ownerInstance, propValue.value);
    150. 	}
    151.  
    152. }
    153.  
    154. module.exports = {
    155. 	onTouchStart: onTouchStart,
    156. 	onTouchMove: onTouchMove,
    157. 	onTouchEnd: onTouchEnd,
    158. 	onClick: onClick,
    159. 	propObserver: propObserver
    160. }

    wxss 

    1. .n-slider {
    2. 	position: relative;
    3. 	z-index: 0;
    4. 	width: 100%;
    5. 	/* 增大点击范围 */
    6. 	padding: 7px 0;
    7. }
    8.  
    9. .n-slider__disabled {
    10. 	opacity: .5;
    11. }
    12.  
    13. .n-slider .n-slider-rail {
    14. 	width: 100%;
    15. 	position: relative;
    16. 	height: 10rpx;
    17. 	background-color: rgb(219, 219, 223);
    18. 	border-radius: 10rpx;
    19. }
    20.  
    21. .n-slider .n-slider-rail .n-slider-rail__fill {
    22. 	position: absolute;
    23. 	top: 0;
    24. 	bottom: 0;
    25. 	background-color: #FA6800;
    26. 	left: 0;
    27. 	/* 改变这个 */
    28. 	width: 0%;
    29. 	border-radius: inherit;
    30.  
    31. }
    32.  
    33. .n-slider .n-slider-handles {
    34. 	position: absolute;
    35. 	top: 0;
    36. 	bottom: 0;
    37. 	/* 这里是滑块宽度的一半 */
    38. 	left: 80rpx;
    39. 	right: 80rpx;
    40. }
    41.  
    42. .n-slider .n-slider-handles .n-slider-handle-wrapper {
    43. 	outline: none;
    44. 	position: absolute;
    45. 	top: 50%;
    46. 	transform: translate(-50%, -50%);
    47. 	display: flex;
    48. 	/* 改变这个 */
    49. 	left: 0%;
    50. 	z-index: 0;
    51. 	/* transition: all .2s; */
    52. }
    53.  
    54. .n-slider .n-slider-handles .n-slider-handle-wrapper .n-slider-handle {
    55. 	height: 42rpx;
    56. 	line-height: 42rpx;
    57. 	width: 160rpx;
    58. 	overflow: hidden;
    59. 	background-color: #FFFFFF;
    60. 	/* box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05); */
    61. 	opacity: .8;
    62. 	font-size: 26rpx;
    63. 	text-align: center;
    64. 	border: 1px solid #b9b9b9;
    65. 	box-sizing: border-box;
    66. 	border-radius: 6rpx;
    67. 	color: #333333;
    68. }

    如果觉得可以，请微信关注《华音有声剧社》公众号，进入小程序听书

  • 相关阅读:
    云安全(1)--初识容器逃逸之特权容器逃逸
    chrome历史版本下载
    基于准确度评估的7自由度手术机器人术前摆位优化算法
    下载文件流
    Go 初识微信订阅号(测试号)
    让1个服务开机自启动 有什么方法
    C++中为何需要函数
    缓存相关问题
    .NET应用系统的国际化-多语言词条服务
    R 语言详细安装教程（保姆级）及 RStudio简易安装教程
  • 原文地址：https://blog.csdn.net/yusha123/article/details/133080902