1.在该项目中的跟目录 新建component目录 和 zyslider的page
2.在zyslider.js 中 写
// component/zyslider/zyslider.js
var util = require('../utils/util')
Component({
/**
* 组件的属性列表
*/
properties: {
/** slider 最小值 */
min: {
type: Number
},
/** slider 最大值 */
max: {
type: Number
},
/** 步进 （没做，有时间再说，项目里没用到撒） */
step: {
type: Number
},
/** 预选选择的小值*/
minValue: {
type: Number
},
/** 预选选择的大值 */
maxValue: {
type: Number
},
/** 滑块颜色 */
blockColor:{
type: String
},
/** 未选择进度条颜色 */
backgroundColor:{
type: String
},
/** 已选择进度条颜色 */
selectedColor:{
type: String
}
},
/**
* 组件的初始数据
*/
data: {
min: 0,
max: 100,
leftValue: 0,
rightValue: 100,
totalLength: 0,
bigLength: 0,
ratio: 0.5,
sliderLength: 40,
containerLeft: 0, //标识整个组件，距离屏幕左边的距离
hideOption: '', //初始状态为显示组件,
length:20,
},
/**
* 组件的方法列表
*/
methods: {
/**
* 设置左边滑块的值
*/
_propertyLeftValueChange: function () {
let minValue = this.data.minValue / this.data.max * this.data.bigLength
let min = this.data.min / this.data.max * this.data.bigLength
this.setData({
leftValue: minValue - min
})
},
/**
* 设置右边滑块的值
*/
_propertyRightValueChange: function () {
let right = this.data.maxValue / this.data.max * this.data.bigLength + this.data.sliderLength
this.setData({
rightValue: right
})
},
/**
* 左边滑块滑动
*/
_minMove: function (e) {
let pagex = e.changedTouches[0].pageX / this.data.ratio - this.data.containerLeft - this.data.sliderLength / 2
if (pagex + this.data.sliderLength >= this.data.rightValue) {
pagex = this.data.rightValue - this.data.sliderLength
} else if (pagex <= 0) {
pagex = 0
}
this.setData({
leftValue: pagex
})
let lowValue = parseInt(pagex / this.data.bigLength * parseInt(this.data.max - this.data.min) + this.data.min)
var myEventDetail = { lowValue: lowValue }
this.triggerEvent('lowValueChange', myEventDetail)
},
/**
* 右边滑块滑动
*/
_maxMove: function (e) {
let pagex = e.changedTouches[0].pageX / this.data.ratio - this.data.containerLeft - this.data.sliderLength / 2
if (pagex <= this.data.leftValue + this.data.sliderLength) {
pagex = this.data.leftValue + this.data.sliderLength
} else if (pagex >= this.data.totalLength) {
pagex = this.data.totalLength
}
this.setData({
rightValue: pagex
})
pagex = pagex - this.data.sliderLength
let heighValue = parseInt(pagex / this.data.bigLength * (this.data.max - this.data.min) + this.data.min)
var myEventDetail = { heighValue: heighValue }
this.triggerEvent('heighValueChange', myEventDetail)
},
/**
* 隐藏组件
*/
hide: function () {
this.setData({
hideOption: 'hide',
})
},
/**
* 显示组件
*/
show: function () {
this.setData({
hideOption: '',
})
},
/**
* 重置
*/
reset: function () {
this.setData({
rightValue: this.data.totalLength,
leftValue: 0,
})
},
},
ready: function () {
let that = this;
const getSystemInfo = util.wxPromisify(wx.getSystemInfo)
const queryContainer = util.wxPromisify(wx.createSelectorQuery().in(this).select(".container").boundingClientRect)
util.wxPromisify(wx.getSystemInfo)()
.then(res => {
let ratio = res.windowWidth / 750
that.setData({
ratio: ratio,
})
})
.then(() => {
var query = wx.createSelectorQuery().in(this)
query.select(".container").boundingClientRect(function (res) {
that.setData({
totalLength: res.width / that.data.ratio - that.data.sliderLength,
bigLength: res.width / that.data.ratio - that.data.sliderLength * 2,
rightValue: res.width / that.data.ratio - that.data.sliderLength,
containerLeft: res.left / that.data.ratio
})
/**
* 设置初始滑块位置
*/
that._propertyLeftValueChange()
that._propertyRightValueChange()
}).exec()
})
}
})
3.在zyslider.wxml 中 写
<view class="container {{hideOption}}">
<view class="slider-item min" style="left:{{leftValue}}rpx;background-color:{{blockColor}};" catchtouchmove="_minMove"></view>
<view class="slider-item max" style="left:{{rightValue -length}}rpx;background-color:{{blockColor}};" catchtouchmove="_maxMove"></view>
<view class="slider-body left" style="left:{{sliderLength}}rpx; width:{{leftValue}}rpx;background-color:{{backgroundColor}};"></view>
<view class="slider-body body" style="left:{{leftValue}}rpx; width:{{rightValue-leftValue}}rpx;background-color:{{selectedColor}};"></view>
<view class="slider-body right" style="left:{{rightValue}}rpx; width:{{totalLength - rightValue}}rpx;background-color:{{backgroundColor}};"></view>
<slot></slot>
</view>
4.在zyslider.wxss 中 写
.container {
/*height: 100%;*/
width: 100%;
position: relative;
}
.slider-body {
height: 4rpx;
background-color: #ddd;
position: relative;
}
.body {
bottom: 60rpx;
background-color: #2e95fb;
z-index: 0.3;
}
.left {
bottom: 58rpx;
z-index: 0.1;
}
.right {
z-index: 0.2;
bottom: 62rpx;
}
.slider-item {
border-radius: 50%;
width: 50rpx;
height: 50rpx;
background-color: #fff;
box-shadow: 0rpx 0rpx 10rpx #ccc;
z-index: 2;
}
.min {
position: relative;
top: 20rpx;
/*left: 100rpx;*/
}
.max {
position: relative;
bottom: 32rpx;
/*left: 600rpx;*/
}
.hide{
display: none;
}
5.在zyslider.json 中写
{
"component": true,
"usingComponents": {}
}
6.在utils文件中的这个文件名util.js 写
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
/**
* 将小程序的API封装成支持Promise的API
* @params fn {Function} 小程序原始API，如wx.login
*/
const wxPromisify = fn => {
return function (obj = {}) {
return new Promise((resolve, reject) => {
obj.success = function (res) {
resolve(res)
}
obj.fail = function (res) {
reject(res)
}
fn(obj)
})
}
}
module.exports = {
formatTime: formatTime,
wxPromisify: wxPromisify
}
6.那个文件需要用到双向slider 就在那个文件的js文件中 的data 中定义值
data：{
low: 18,
heigh: 60,
}
7.同上 在xxx.wxml 文件中 写
<!-- 年龄 开始-->
<view class="index-more-title strat">
<text class="">年龄</text>
<text class="index-nl">{{nl}}</text>
</view>
<view class="index-more-view" style="height:100rpx;margin-bottom:140rpx;padding:0rpx 70rpx;">
<zy-slider id="zy-slider" minValue="{{low}}" maxValue="{{heigh}}" min="18" max="60" catch:lowValueChange="lowValueChangeAction" catch:heighValueChange="heighValueChangeAction" />
<view class="'sliderView center">
<view class="left">18</view>
<view class="right text-right">60+</view>
</view>
</view>
8.在xxx.json文件中 写
{
"usingComponents": {
"zy-slider": "../../component/zyslider"
}
}
网友评论