miniprogram / winebook · 提交

转到一个项目

作者 lihongjuan
提交 01782dea05e0d336192a59ee9420780b522aefdd 1 个父辈 3c48d8a0

2345234

内嵌 并排对比
正在显示 6 个修改的文件 包含 333 行增加 和 3 行删除
{
"pages": [
"pages/homapage/homepage",
"pages/login/login",
"pages/forgetmima/forgetmima",
... ... @@ -56,7 +55,8 @@
"pages/homeblock/bofangexample/bofangexample",
"pages/myblock/jiudan/jiudan",
"pages/myblock/yonghufankui/yonghufankui",
"pages/myblock/xiugaimima/xiugaimima"
"pages/myblock/xiugaimima/xiugaimima",
"pages/yonghuxieyi/yonghuxieyi"
],
"window": {
"backgroundTextStyle": "light",
... ...
// component/zyslider/zyslider.js
var util = require('../utils/util')
const app=getApp()
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,
ppvalue:100,
ppleft:0,
totalLength: 0,
bigLength: 0,
ratio: 0.5,
sliderLength: 20,
containerLeft: 0, //标识整个组件，距离屏幕左边的距离
hideOption: '', //初始状态为显示组件
},
/**
* 组件的方法列表
*/
methods: {
/**
* 设置左边滑块的值
*/
_propertyLeftValueChange: function () {
console.log(this.data.minValue);
console.log(this.data.max);
console.log(this.data.bigLength)
let minValue = this.data.minValue / this.data.max * this.data.bigLength;
console.log(minValue)
let min = this.data.min / this.data.max * this.data.bigLength;
console.log(min)
this.setData({
leftValue: minValue - min,
ppleft: minValue - min
})
console.log(this.data.leftValue)
},
/**
* 设置右边滑块的值
*/
_propertyRightValueChange: function () {
let right = this.data.maxValue / this.data.max * this.data.bigLength + this.data.sliderLength
this.setData({
rightValue: right,
ppvalue:right
})
console.log(this.data.rightValue)
},
/**
* 左边滑块滑动
*/
_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,
})
/**
* 设置初始滑块位置
*/
setTimeout(function(){
that._propertyLeftValueChange()
that._propertyRightValueChange()
},350)
}).exec()
})
},
})
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--component/zyslider.wxml-->
<view class="container {{hideOption}}">
<!-- <view class="slider-item min" style="left:{{leftValue}}rpx;background-color:#E81825;" catchtouchmove="_minMove">
</view> -->
<view class="slider-item min" style="left:{{leftValue}}rpx;" catchtouchmove="_minMove">
<image src="/img/aicon_17.png"></image>
</view>
<!-- <view class="slider-item max" style="left:{{rightValue}}rpx;background-color:#E81825;" catchtouchmove="_maxMove"></view> -->
<view class="slider-item max" style="left:{{rightValue}}rpx;" catchtouchmove="_maxMove">
<image src="/img/aicon_17.png"></image>
</view>
<view class="slider-body left" style="left:{{sliderLength}}rpx; width:{{leftValue}}rpx;"></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;"></view>
<!-- <view class="pp" style="left:{{ppleft}}rpx; width:{{ppvalue-ppleft}}rpx">
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
</view> -->
<slot></slot>
</view>
\ No newline at end of file
... ...
/* component/zyslider.wxss */
.container {
/*height: 100%;*/
width: 100%;
position: relative;
}
.slider-body {
height: 2rpx;
background-color: #ddd;
position: relative;
}
.body {
bottom: 28rpx;
background-color: #19896f;
z-index: 0.3;
}
.left {
bottom: 26rpx;
z-index: 0.1;
}
.right {
z-index: 0.2;
bottom: 30rpx;
}
.slider-item {
border-radius: 50%;
width: 35rpx;
height: 35rpx;
/* background-color: #E81825; */
font-size: 0;
z-index: 2;
}
.min {
position: relative;
top: 27rpx;
/*left: 100rpx;*/
}
.max {
position: relative;
bottom:9rpx;
/*left: 600rpx;*/
}
.hide{
display: none;
}
.item{
height:20rpx;
width:2rpx;
background: #E81825;
margin-left:20rpx;
}
.pp{
display:flex;
justify-content: space-around;
align-items: center;
margin:0 auto;
}
.item{
width:2rpx;
height:20rpx;
background: #E81825;
}
\ No newline at end of file
... ...
... ... @@ -49,7 +49,7 @@
"list": []
},
"miniprogram": {
"current": 46,
"current": 47,
"list": [
{
"id": -1,
... ... @@ -377,6 +377,13 @@
"id": -1,
"name": "账号与安全",
"pathName": "pages/myblock/zhanghaoyuanquan/zhanghaoyuanquan",
"query": "",
"scene": null
},
{
"id": -1,
"name": "用户协议",
"pathName": "pages/yonghuxieyi/yonghuxieyi",
"scene": null
}
]
... ...