浅谈小程序怎么实现“五星评价”功能（支持点击+滑动）

浅谈小程序怎么实现“五星评价”功能（支持点击+滑动）

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

小程序— 五星评价功能

1、已完成需求：

【相关学习推荐：小程序开发教程】

2、原理

页面布局

/*wxss 一行内展示五颗星并设置其间距为30rpx*/.scoreContent {display: inline-block;}.starLen {margin-right: 30rpx;display: inline-block;}.scoreContent .starLen:last-child {margin-right: 0;}.star {width: 80rpx;height: 80rpx;vertical-align: text-bottom;display: inline-block;}-

/*wxml 每个starLen元素上绑定 touchMove touchEnd tap事件*/ -

以上渲染中重要的是，三目运算所要展示的应该是哪种图标，index为scoreArray的元素下标，每一个item的下标index都要与score进行比较，规则如下：

//取 score与index下标做比较,默认score为0scoreindex+0.5 展示fullStar.pngindex-

data预设值

/** * 组件的初始数据 */ data: { fullStarUrl: '/images/full.png', //满星图片 halfStarUrl: '/images/half.png', //半星图片 nullStarUrl: '/images/null.png', //空星图片 score: 0, //评价分数 rate: 2, //设计稿宽度÷屏幕实际宽度 startX: 0, //第一颗星screenX的距离 },-

组件加载、数据做初始化

//设定比率rate与第一颗星screenX 组件初始化attached 或者 页面初始化onShowattached: function () { // 在组件实例进入页面节点树时执行 let { screenWidth } = wx.getSystemInfoSync(); let rate = screenWidth / 750; this.setData({ rate: rate }) const query = this.createSelectorQuery(); query.select('#scoreContent').boundingClientRect((res)=> { this.setData({ startX: res.left }) }).exec()},-

更多编程相关知识，请访问：编程视频！！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。