微信小程序评分组件Rate

效果图如下

组件支持功能：

仅显示评分，或者显示+打分
点击半颗星评分，点击整颗星评分

新建组件文件夹Rate

Rate.wxml文件内容

<!-- 评分组件 -->
<view class='starbox'><text class='startext' wx:if="{{isShowStarValue}}">{{starValue}}</text><view class='imgbox imgbox1' wx:if="{{showTap}}" ><block wx:for="{{stars}}" wx:for-index="index" wx:for-item="item" wx:key="key"><image class="star-image" style="width:{{WH}}rpx;height:{{WH}}rpx;left: {{item*(WH+10)}}rpx" src="{{starValue > item ?(starValue-item == 0.5?halfSrc:selectedSrc) : normalSrc}}"><view class="allItem" style="left:0rpx;width:{{WH}}rpx;height:{{WH}}rpx;" data-key="{{item+1}}" wx:if="{{isInteger}}" bindtap="selectAll"></view><view wx:else><view class="item" style="left:0rpx;width:{{WH/2}}rpx;height:{{WH}}rpx;" data-key="{{item+0.5}}" bindtap="selectLeft"></view><view class="item" style="left:{{WH/2}}rpx;width:{{WH/2}}rpx;height:{{WH}}rpx;" data-key="{{item+1}}" bindtap="selectRight"></view></view></image></block></view><view class='imgbox imgbox2' wx:else><block wx:for="{{stars}}" wx:for-index="index" wx:for-item="item" wx:key="key"><image class="star-image" style="width:{{WH}}rpx;height:{{WH}}rpx;left: {{item*(WH+10)}}rpx" src="{{starValue > item ?((starValue-item >= 0.5 && starValue-item < 1)?halfSrc:selectedSrc) : normalSrc}}"></image></block></view>
</view>

Rate.wxss文件

.starbox{height: 60rpx;display: flex;align-items: center;
}
.startext {font-size: 48rpx;height: 70rpx;line-height: 70rpx;color: #ff793e;font-weight: 700;margin-right: 10rpx;
}
.imgbox {flex: 1;height: 60rpx;position: relative;display: flex;align-items: center;
}
.star-image {width: 50rpx;height: 50rpx;position: absolute;top: 4rpx;left: 0;/* margin-left: 50rpx; */src: "../images/no-star.png";
}
.item,.allItem{position: absolute;top: 0rpx;
}

Rate.json文件

{"component": true
}

Rate.js文件

Component({properties:{starValue:{value: 0,//父组件传过来的评分数字type:Number},disabled:{//是否只读，disabled="true"可评分，disabled="false"只显示（刚好写反了）value:false,type:Boolean},isShowStarValue:{value:false,//父组件传过来的是否显示评分type:Boolean},WH:{value: 50,//父组件设置评分星星的宽高type:Number},isInteger:{//父组件设置是操作整颗星 || 半颗星value:false,type:Boolean}},data: {stars: [0, 1, 2, 3, 4],normalSrc: '../../assets/images/no-star.png',//没有点亮的星星图片selectedSrc: '../../assets/images/full-star.png',//完全点亮的星星图片halfSrc: '../../assets/images/half-star.png',//点亮一半的星星图片showTap:true//是否可以点击},methods: {//点击左边,半颗星selectLeft: function (e) {console.log("left");var key = e.currentTarget.dataset.keyif (this.data.starValue == 0.5 && e.currentTarget.dataset.key == 0.5) {//只有一颗星的时候,再次点击,变为0颗key = 0;}this.setData({starValue: key})this.triggerEvent('getStarValue',{params: this.data.starValue});},//点击右边,整颗星selectRight: function (e) {console.log("right");var key = e.currentTarget.dataset.keythis.setData({starValue: key})this.triggerEvent('getStarValue',{params: this.data.starValue});},//点击整颗星selectAll(e){console.log("all");var key = e.currentTarget.dataset.key;if (this.data.starValue == 1 && e.currentTarget.dataset.key == 1) {//只有一颗星的时候,再次点击,变为0颗key = 0;}this.setData({starValue: key})this.triggerEvent('getStarValue',{params: this.data.starValue});},},attached: function () {this.setData({showTap: this.properties.disabled})}
})

父组件引用Rate

父组件json

{"usingComponents": {"Rate": "../../components/Rate/Rate"}
}

父组件wxml

示例一：

<!-- 评分组件 展示效果：显示组件评分；没设置disabled，默认值是false，也就是只展示评分
-->
<Rate starValue="4"  isShowStarValue="true" id="star"></Rate>

示例二：

<!-- 效果：starValue="0" 默认0分，WH="48" 星星高度48rpxdisabled="true" 可以点击评分isInteger="true" 点击评分是整颗星为单位
--><Rate id="star" starValue="0" WH="48" disabled="true" bindgetStarValue="getStarValue" isInteger="true"></Rate>

微信小程序评分组件Rate相关推荐

微信小程序评分组件rater（打分，五颗星，不支持半颗行）
源码在我的有道云笔记里面,有需要的可以去看看,看看实习思路或者直接用也可以,可以留下你的评论哦有道云笔记地址:https://note.youdao.com/share/?id=9be8412874 ...
微信小程序Demo组件大全（对话框、指示器、五星评分，画廊，影院座位……
微信小程序 - 自定义组件预览用微信web开发者工具打开src目录(请注意,是src目录,不是整个项目) 使用组件的wxml结构请看src/components/下的组件样式文件可直接引用src ...
微信小程序image组件开发程序以及相关图片问题参考资料汇总
微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...
小程序子组件向父组件传值_一套组件化、可复用、易扩展的微信小程序 UI 组件库...
如何使用 Wux Weapp 是一套组件化.可复用.易扩展的微信小程序 UI 组件库.在开始使用之前,需要先阅读微信小程序自定义组件的相关文档. 通过 npm 安装,需要依赖小程序基础库 2.2.1 ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性: wxml 显 ...
手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...

微信小程序评分组件Rate

组件支持功能：

仅显示评分，或者显示+打分

点击半颗星评分，点击整颗星评分

Rate.wxml文件内容

微信小程序评分组件Rate相关推荐

最新文章

热门文章