微信小程序-星级评分-版本1
2019-11-18 本文已影响0人
HCL黄
如图
222333.gif
由于是第一版，代码比较low，有时间会优化的
第一步，新建星星评分组件starsScore
E0987A09-869E-4146-9118-552E687C81F2.png
第二步，在starsScore.wxml布局UI
<!--components/starsScore/starsScore.wxml-->
<view class="content column">
<text class='titleV'>请作出评价{{enableToTouch?'（手指滑动）':'（点击星星）'}}</text>
<view class='column scoreV'>
<view class='row item'>
<text class='item-text'>能力1:</text>
<view wx:if='{{enableToTouch}}'
class="row"
data-index='{{0}}'
bindtouchmove="touchMove"
bindtouchend="touchEnd">
<!-- 事件多参数传参'data-xx' 'currentTarget.dataset.xx' -->
<image wx:for="{{stars}}"
wx:key='{{index}}'
class="item-img {{index==stars.length-1?'marginRight0':''}}"
src="{{power1>index?(power1-index>0.5?'/images/full.png':'/images/half.png'):'/images/empty.png'}}"
>
</image>
</view>
<view wx:else class="row" >
<!-- 事件多参数传参'data-xx' 'currentTarget.dataset.xx' -->
<image wx:for="{{stars}}"
wx:key='{{index}}'
data-index='{{0}}'
data-subindex='{{index}}'
class="item-img {{index==stars.length-1?'marginRight0':''}}"
src="{{power1>index?(power1-index>0.5?'/images/full.png':'/images/half.png'):'/images/empty.png'}}"
bindtap="didClickScore"
>
</image>
</view>
</view>
<view class='row item'>
<text class='item-text'>能力2:</text>
<view wx:if='{{enableToTouch}}'
class="row"
data-index='{{1}}'
bindtouchmove="touchMove"
bindtouchend="touchEnd">
<!-- 事件多参数传参'data-xx' 'currentTarget.dataset.xx' -->
<image wx:for="{{stars}}"
wx:key='{{index}}'
class="item-img {{index==stars.length-1?'marginRight0':''}}"
src="{{power2>index?(power2-index>0.5?'/images/full.png':'/images/half.png'):'/images/empty.png'}}"
>
</image>
</view>
<view wx:else class="row" >
<!-- 事件多参数传参'data-xx' 'currentTarget.dataset.xx' -->
<image wx:for="{{stars}}"
wx:key='{{index}}'
data-index='{{1}}'
data-subindex='{{index}}'
class="item-img {{index==stars.length-1?'marginRight0':''}}"
src="{{power2>index?(power2-index>0.5?'/images/full.png':'/images/half.png'):'/images/empty.png'}}"
bindtap="didClickScore"
>
</image>
</view>
</view>
<view class='row item'>
<text class='item-text'>能力3:</text>
<view wx:if='{{enableToTouch}}'
class="row"
data-index='{{2}}'
bindtouchmove="touchMove"
bindtouchend="touchEnd">
<!-- 事件多参数传参'data-xx' 'currentTarget.dataset.xx' -->
<image wx:for="{{stars}}"
wx:key='{{index}}'
class="item-img {{index==stars.length-1?'marginRight0':''}}"
src="{{power3>index?(power3-index>0.5?'/images/full.png':'/images/half.png'):'/images/empty.png'}}"
>
</image>
</view>
<view wx:else class="row" >
<!-- 事件多参数传参'data-xx' 'currentTarget.dataset.xx' -->
<image wx:for="{{stars}}"
wx:key='{{index}}'
data-index='{{2}}'
data-subindex='{{index}}'
class="item-img {{index==stars.length-1?'marginRight0':''}}"
src="{{power3>index?(power3-index>0.5?'/images/full.png':'/images/half.png'):'/images/empty.png'}}"
bindtap="didClickScore"
>
</image>
</view>
</view>
</view>
</view>
- 1、当
enableToTouch为true时用的是一套UI，false又是另一套UI - 2、当
enableToTouch为true时使用的是touchmove方法，false使用的是点击星星图片方法
第三步，在starsScore.wxss渲染，这里就不多说了
/* components/starsScore/starsScore.wxss */
.cnt {
width: 200rpx;
height: 200rpx;
background-color: blue;
}
.content {
background:rgba(255,255,255,1);
box-shadow:0rpx 4rpx 12rpx 0rpx rgba(0,0,0,0.15);
border-radius:20rpx;
padding: 30rpx;
margin: 30rpx;
}
.titleV {
height:48rpx;
font-size:34rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(0,0,0,1);
line-height:48rpx;
}
.scoreV {
margin-top: 30rpx;
}
.column {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.item {
margin-bottom: 20rpx;
}
.item-text {
width: 100rpx;
font-size:28rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(136,136,136,1);
line-height:40rpx;
}
.item-img {
width: 40rpx;
height: 40rpx;
margin-right: 16rpx;
}
.marginRight0 {
margin-right: 0rpx;
}
第四步，在starsScore.js编写逻辑
// components/starsScore/starsScore.js
Component({
/**
* 组件的属性列表
*/
properties: {
// 是否启用touch事件，启动之后点击事件无效
enableToTouch: {
type: Boolean,
value: false
}
},
/**
* 组件的初始数据
*/
data: {
stars: ['1', '1', '1', '1', '1'],
power1: 1,
power2: 2,
power3: 3,
starsX: ['200', '256', '312', '368', '424'] // 视图最左边(30+30+100)+图片宽度40+图片右边16，第一个不用加16
},
/**
* 组件的方法列表
*/
methods: {
getPXFromRPX:function(value) {
let res = wx.getSystemInfoSync()
let windowW = res.windowWidth
let ratio = windowW/750
return value*ratio
},
touchStart: function (e) {
console.log(e)
},
touchMove: function (e) {
console.log(e)
var that = this;
var index = e.currentTarget.dataset.index;
let x = e.touches[0].pageX
console.log(x)
var subIndex = 0;
console.log('1')
for(let i = 0; i < that.data.starsX.length; i++) {
var item = that.data.starsX[i];
// 转px
let itemInt = parseInt(item)/2
if(x <= itemInt) {
subIndex = i;
break;
}
}
console.log('2')
// 星星视图左边间距=marginL+paddingL+titleW
let leftMargin = 30 + 30 + 100 //rpx
let totalItemW = (subIndex + 1) * 40 //rpx
let totalItemMargin = subIndex * 16 //rpx
// /2转为px
var maxX = (leftMargin + totalItemW + totalItemMargin) / 2
console.log('maxX' + maxX)
var dis = Math.abs(x - maxX);
console.log('dis' + dis)
var add = 1;
// 一个星星是40rpx也就是20px,那个半个星星就是10px
if (dis < 10) { // 证明是整个
console.log('整个')
add = 1
} else { // 证明是半个
console.log('半个')
add = 0.4
}
if (index == 0) { // 能力1
that.setData({
power1: subIndex + add
})
} else if (index == 1) { // 能力2
that.setData({
power2: subIndex + add
})
} else { // 能力3
that.setData({
power3: subIndex + add
})
}
},
touchEnd:function(e) {
// console.log(e)
},
didClickScore:function(e) {
console.log(e)
var that = this;
var index = e.currentTarget.dataset.index;
var subIndex = e.currentTarget.dataset.subindex;
var x = e.detail.x;
console.log(subIndex)
console.log(x)
// 星星视图左边间距=marginL+paddingL+titleW
let leftMargin = 30+30+100 //rpx
let totalItemW = (subIndex + 1) * 40 //rpx
let totalItemMargin = subIndex * 16 //rpx
// /2转为px
var maxX = (leftMargin + totalItemW + totalItemMargin)/2
console.log('maxX' + maxX)
var dis = Math.abs(x - maxX);
console.log('dis' + dis)
var add = 1;
// 一个星星是40rpx也就是20px,那个半个星星就是10px
if(dis < 10) { // 证明是整个
console.log('整个')
add = 1
} else { // 证明是半个
console.log('半个')
add = 0.4
}
if (index==0) { // 能力1
that.setData({
power1: subIndex + add
})
} else if (index == 1) { // 能力2
that.setData({
power2: subIndex + add
})
} else { // 能力3
that.setData({
power3: subIndex + add
})
}
}
}
})
-
1、间距、宽度等说明
ED60CF4F-B0B8-437E-B687-F7DE67484655.png
38E9293B-BDF8-4F64-B52D-D218ABCF8F80.png
D54896E9-7463-4CA8-91F7-0577F76EDFD2.png
-
2、index、subIndex说明
32738F5E-BD22-4DC3-B865-B74D757A31E1.png
第五步，在index.json导入星级评分组件
{
"usingComponents": {
"starsScore": "../../components/starsScore/starsScore"
}
}
第六步，在index.wxml使用组件
<!--index.wxml-->
<starsScore></starsScore>
<starsScore enableToTouch="{{true}}"></starsScore>
完成，编译看效果
星星图片如下图
empty.png
full.png
half.png
