微信小程序实现评分功能

前言

 本人在用原生小程序开发时，需要用到评分功能，于是自己动手撸了一个评分显示组件。包含满星、半星功能。

废话少说，上才艺:

1、先任意创建组件，index.wxml代码如下：

<view class='starbox'><view class='imgbox imgbox1' ><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 < 1?halfSrc:selectedSrc) : normalSrc}}"></image></block></view>
</view>

2、index.js代码如下：

Component({properties:{starValue:{value: 0,//父组件传过来的评分数字type:Number},disabled:{//是否只读，disabled="true"可评分，disabled="false"只显示（刚好写反了）value:false,type:Boolean},isShowStarValue:{value:false,//父组件传过来的是否显示评分type:Boolean},WH:{value: 20,//父组件设置评分星星的宽高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//是否可以点击},})

3、index.wxss代码如下：

.starbox{height: 0rpx;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: 25rpx;height: 25rpx;position: absolute;top: 4rpx;left: 0;src: "../images/no-star.png";
}
.item{position: absolute;top: 0rpx;
}

4、使用评分组件，代码如下

1、在.json文件引入：
"usingComponents": {"Rate":"../../components/grade/index"
},
2、在.wxml文件代码如下：
<Rate starValue="5" id="star"></Rate>

5、注意，此篇文章的评分组件满分是10分制，如要满足实际业务需求，在组件代码更改即可

6、最终效果，可扫码查看：

5、所需素材下载地址：https://download.csdn.net/download/qq_43762932/85411562

微信小程序实现评分，包含满星、半星，模仿豆瓣电影评分显示相关推荐

ASP版微信小程序支付（包含源代码）
asp版本的微信小程序支付里面代码的解说和各代码用途微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhu ...
微信小程序设置高度占满屏幕
因为有个页面需要改变背景颜色,所以要高度占满. 微信小程序设置高度占满屏幕: /*设置根节点,高度占满整个屏幕 */ page{height: 100%; } /*然后设置子节点高度100%*/ .c ...
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局，为啥到真机就是乱的...
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局，为啥到真机就是乱的
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...
微信小程序设置背景占满整个页面
微信小程序,默认的根节点是<page></page>,所有内容都包裹在这个标签里,如何让页面的背景占满整个屏幕?? <page><view class=&qu ...
云开发版高效学习微信小程序源码包含复习资料学习共享护眼精灵等功能
☑️ 编号:X0016 ☑️ 品牌:暂无 ☑️ 语言:微信小程序 ☑️ 数据库:无需数据库 ☑️ 类型:微信小程序 ☑️ 规格:小程序 ※ 欢迎关注私信(发消息不限制),领取福利 ※ ☑️ 源码介绍: ...
微信小程序中图片占满整个屏幕实现方法
将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦. 但是在微信小程序中,是没有dom对象的,根节点是page,使用pag ...
微信小程序云存储中调用fileid作为图片路径，无法正常显示解决方法
教同学们写一个图片瀑布流的微信小程序,图片是放到云存储中的,大多数同学都没有问题,有个别同学出现了下方的问题,图片无法正常显示查阅了官方的资料,发现image组件的src从2.3.0 起开始支持云文 ...
开发微信小程序，导入使用本地图片，Android手机上测试图片显示空白
微信小程序中,导入使用本地图片,开发时在电脑上显示正常,iOS上也能正常显示,但是在Android上图片显示空白, 如图: 原因:网上查找,说有可能是这些原因 1.image src中的图片地址对英文 ...

微信小程序实现评分，包含满星、半星，模仿豆瓣电影评分显示

微信小程序实现评分功能

前言

微信小程序实现评分，包含满星、半星，模仿豆瓣电影评分显示相关推荐

最新文章

热门文章