筛选

components/range/range-slider.js

@@ -0,0 +1,230 @@
+const _windowWidth = wx.getSystemInfoSync().windowWidth;
+Component({
+	properties: {
+		//组件宽度
+		width: {
+			type: Number,
+			value: 700,
+			observer: function (newVal, oldVal, changedPath) {
+				var that = this;
+				if (newVal != that.data.width) {
+					this._refresh();
+				}
+			},
+		},
+		contentWidth: {
+			type: String,
+			value: "100vw",
+		},
+		//组件高度
+		height: {
+			type: Number,
+			value: 100,
+		},
+		//滑块大小
+		blockSize: {
+			type: Number,
+			value: 60,
+			observer: function (newVal, oldVal, changedPath) {
+				var that = this;
+				if (newVal != that.data.blockSize) {
+					this._refresh();
+				}
+			},
+		},
+		//区间进度条高度
+		barHeight: {
+			type: Number,
+			value: 10,
+		},
+		//背景条颜色
+		backgroundColor: {
+			type: String,
+			value: "#e9e9e9",
+		},
+		//已选择的颜色
+		activeColor: {
+			type: String,
+			value: "#E5EDFF",
+		},
+		//最小值
+		min: {
+			type: Number,
+			value: 0,
+			observer: function (newVal, oldVal, changedPath) {
+				var that = this;
+				if (newVal != that.data.min) {
+					that._refresh();
+				}
+			},
+		},
+		//最大值
+		max: {
+			type: Number,
+			value: 100,
+			observer: function (newVal, oldVal, changedPath) {
+				var that = this;
+				if (newVal != that.data.max) {
+					that._refresh();
+				}
+			},
+		},
+		//设置初始值
+		values: {
+			type: Object,
+			value: [0, 100],
+			observer: function (newVal, oldVal, changedPath) {
+				var that = this;
+				// var values = that.data.values;
+				if (that._isValuesValid(newVal) && that._isValuesValid(oldVal)) {
+					if (oldVal[0] != newVal[0] || oldVal[1] != newVal[1]) that._refresh();
+				}
+			},
+		},
+	},
+	/**
+	 * 组件生命周期函数，在组件布局完成后执行
+	 */
+	ready() {
+		// console.log(this.data.activeColor);
+		// console.log(this.data.width);
+		this.setData({
+			progressBarWidth: this.data.width,
+		});
+		this._refresh();
+	},
+	options: {
+		multipleSlots: true,
+	},
+	data: {
+		MAX_LENGTH: 700,
+		minBlockLeft: 0,
+		maxBlockLeft: 700,
+		progressBarLeft: 0,
+		progressBarWidth: 700,
+		fangdou: true,
+	},
+	methods: {
+		_pxToRpx: function (px) {
+			return (750 * px) / _windowWidth;
+		},
+		_onBlockTouchStart: function (e) {
+			console.log(e);
+			this._blockDownX = e.changedTouches[0].pageX;
+			this._blockLeft = e.target.dataset.left;
+			this._curBlock = e.target.dataset.tag;
+		},
+		_onBlockTouchMove: function (e) {
+			var that = this;
+			if (that.data.fangdou) {
+				that.data.fangdou = false;
+				var values = that._calculateValues(e);
+				that._refreshProgressBar(values[2], values[3]);
+				that._refreshBlock(values[2], values[3]);
+				var eventDetail = {
+					minValue: values[0],
+					maxValue: values[1],
+					fromUser: true,
+				};
+				var eventOption = {};
+				that.triggerEvent("rangechange", eventDetail, eventOption);
+				setTimeout(() => {
+					that.data.fangdou = true;
+				}, 5);
+			}
+		},
+		_onBlockTouchEnd: function (e) {
+			var that = this;
+			var values = that._calculateValues(e);
+			that._refreshProgressBar(values[2], values[3]);
+			that._refreshBlock(values[2], values[3]);
+			var eventDetail = {
+				minValue: values[0],
+				maxValue: values[1],
+				fromUser: true,
+			};
+			var eventOption = {};
+			that.triggerEvent("rangechange", eventDetail, eventOption);
+		},
+		_isValuesValid: function (values) {
+			return values != null && values != undefined && values.length == 2;
+		},
+		/**
+		 * 根据手势计算相关数据
+		 */
+		_calculateValues: function (e) {
+			var that = this;
+			var moveLength = e.changedTouches[0].pageX - that._blockDownX;
+			var left = that._blockLeft + that._pxToRpx(moveLength);
+			left = Math.max(0, left);
+			left = Math.min(left, that.data.MAX_LENGTH);
+			var minBlockLeft = that.data.minBlockLeft;
+			var maxBlockLeft = that.data.maxBlockLeft;
+			if (that._curBlock == "minBlock") {
+				minBlockLeft = left;
+			} else {
+				maxBlockLeft = left;
+			}
+			var range = that.data.max - that.data.min;
+			var minLeft = Math.min(minBlockLeft, maxBlockLeft);
+			var maxLeft = Math.max(minBlockLeft, maxBlockLeft);
+			var minValue = (minLeft / that.data.MAX_LENGTH) * range + that.data.min;
+			var maxValue = (maxLeft / that.data.MAX_LENGTH) * range + that.data.min;
+			return [minValue, maxValue, minLeft, maxLeft];
+		},
+		/**
+		 * 计算滑块坐标
+		 */
+		_calculateBlockLeft: function (minValue, maxValue) {
+			var that = this;
+			var blockSize = that.data.blockSize;
+			var range = that.data.max - that.data.min;
+			var minLeft = ((minValue - that.data.min) / range) * that.data.MAX_LENGTH;
+			var maxLeft = ((maxValue - that.data.min) / range) * that.data.MAX_LENGTH;
+			return [minLeft, maxLeft];
+		},
+		/**
+		 * 刷新进度条视图
+		 */
+		_refreshProgressBar: function (minBlockLeft, maxBlockLeft) {
+			var that = this;
+			var blockSize = that.data.blockSize;
+			that.setData({
+				progressBarLeft: minBlockLeft + blockSize / 2,
+				progressBarWidth: Math.abs(maxBlockLeft - minBlockLeft),
+			});
+		},
+		/**
+		 * 刷新滑块视图
+		 */
+		_refreshBlock: function (minBlockLeft, maxBlockLeft) {
+			var that = this;
+			that.setData({
+				minBlockLeft: minBlockLeft,
+				maxBlockLeft: maxBlockLeft,
+			});
+		},
+		/**
+		 * 刷新整个视图
+		 */
+		_refresh: function () {
+			var that = this;
+			var MAX_LENGTH = that.data.width - that.data.blockSize;
+			that.setData({
+				MAX_LENGTH: MAX_LENGTH,
+				maxBlockLeft: MAX_LENGTH,
+				progressBarWidth: MAX_LENGTH,
+			});
+			var values = that.data.values;
+			if (that._isValuesValid(values)) {
+				values[0] = Math.max(that.data.min, values[0]);
+				values[0] = Math.min(values[0], that.data.max);
+				values[1] = Math.max(that.data.min, values[1]);
+				values[1] = Math.min(values[1], that.data.max);
+				var leftValues = that._calculateBlockLeft(values[0], values[1]);
+				that._refreshProgressBar(leftValues[0], leftValues[1]);
+				that._refreshBlock(leftValues[0], leftValues[1]);
+			}
+		},
+	},
+});

components/range/range-slider.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/range/range-slider.wxml

@@ -0,0 +1,12 @@
+<view class="range-slider" catchtap style="width:calc({{contentWidth}} - 40px);height:{{height}}px">
+  <view class="range-bar" catchtap style="width:calc({{width}}rpx - 20rpx);height:{{8}}rpx">
+    <view class="range-bar-bg" style="background-color:{{backgroundColor}};margin-left:10px"></view>
+    <view class="range-bar-progress" style="margin-left:{{progressBarLeft}}rpx;width:{{progressBarWidth}}rpx;background-color:{{activeColor}}"></view>
+  </view>
+  <view class="block" style="margin-left:{{minBlockLeft}}rpx" catchtouchstart="_onBlockTouchStart" catchtouchmove="_onBlockTouchMove" catchtouchend="_onBlockTouchEnd" data-left="{{minBlockLeft}}" data-tag="minBlock">
+    <slot name="minBlock"></slot>
+  </view>
+  <view class="block" style="margin-left:{{maxBlockLeft}}rpx" catchtouchstart="_onBlockTouchStart" catchtouchmove="_onBlockTouchMove" catchtouchend="_onBlockTouchEnd" data-left="{{maxBlockLeft}}" data-tag="maxBlock">
+    <slot name="maxBlock"></slot>
+  </view>
+</view>

components/range/range-slider.wxss

@@ -0,0 +1,46 @@
+.range-slider {
+	position: relative;
+}
+
+.range-bar {
+	position: absolute;
+}
+
+.range-bar {
+	position: absolute;
+	top: 50%;
+	transform: translate(0, -50%);
+	border-radius: 10000rpx;
+}
+
+.range-bar-bg {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	border-radius: 10000rpx;
+}
+
+.range-bar-progress {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background-color: blueviolet;
+}
+
+.block {
+	position: absolute;
+  width: 30px;
+	height: 30px;
+	top: 50%;
+	border-radius: 50%;
+	transform: translate(0, -50%);
+  background-image: url('https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/home_age.svg');
+  background-color: #fff;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+	/* background-color: var(--color-ysd); */
+}
+.block image {
+  width: 100%;
+  height: 100%;
+}

pages/index/index.json

@@ -1,6 +1,9 @@
 {
-  "navigationBarBackgroundColor":"#0dcc91",
-  "navigationBarTextStyle":"white",
+  "usingComponents": {
+    "range-slider": "../../components/range/range-slider"
+  },
+  "navigationBarBackgroundColor": "#0dcc91",
+  "navigationBarTextStyle": "white",
   "backgroundColor": "#FFFFFF",
   "navigationBarTitleText": "一才工作"
 }

pages/index/index.wxml

@@ -92,7 +92,7 @@
                 <i class="iconfont icon-zhankai f12 c9 fst ml4" wx:if="{{whichOneShow != 'special' && selectJobList.length <= 0}}" data-type="special"></i>
                 <view wx:if="{{selectJobList.length > 0}}" class="specialnum ml4" catchtap data-type="special">{{selectJobList.length}}</view>
                 <!-- catchtap="hideLeft" -->
-                <scroll-view class="gjFixed" catchtouchmove="modalMove" catchtap wx:if="{{whichOneShow == 'special'}}">
+                <scroll-view class="gjFixed" catchtouchmove="modalMove"  wx:if="{{whichOneShow == 'special'}}">
                   <scroll-view scroll-y="{{true}}" catchtap class="filterBox filterContainer">
                     <!-- <view class="sub" hover-class="none" hover-stop-propagation="false">
                     <view class="title">1.烟疤纹身（单选）</view>
@@ -112,6 +112,16 @@
                         <span wx:for="{{filterData.price}}" wx:key="index" data-type="price" data-id="{{item.id}}" bindtap="setActive" class="{{item.active== item.id ? 'active':''}}" hover-class="none" hover-stop-propagation="false">{{item.name}}</span>
                       </view>
                     </view>-->
+                     <view class="sub" hover-class="none" hover-stop-propagation="false">
+                        <view class="title">年龄（岁）</view>
+                        <view class="content por" style="justify-content:space-between">
+                          <view class="slider_value fsa" style="position: absolute;top: -15px;left: 50%;color: var(--color-ysd);transform:translateX(-50%)" hover-class="none" hover-stop-propagation="false">
+                            <view class hover-class="none" hover-stop-propagation="false">{{minAge + '-'}}</view>
+                            <view class hover-class="none" hover-stop-propagation="false">{{maxAge == 60 ? maxAge + '+' : maxAge }}</view>
+                          </view>
+                          <range-slider height="50" block-size="50" min="16" max="60" values="{{rangeValues}}" bindrangechange="onRangeChange" activeColor="var(--color-ysd)"></range-slider>
+                        </view>
+                      </view>
                     <view class="sub" hover-class="none" hover-stop-propagation="false">
                       <view class="title">1.性别（单选）</view>
                       <view class="content">
@@ -155,7 +165,7 @@
                       </view>
                     </view>
                   </scroll-view>
-                  <view class="btnBox bt1">
+                  <view class="btnBox bt1" catchtap>
                     <button class="clearFilter" data-type="innerclear" bindtap="clearFilter1">清除</button>
                     <button class="normalBtn loginOut" bindtap="toList">确定</button>
                   </view>