微信小程序实现五星评价性能
|
这篇文章给大家介绍了“微信小程序实现五星评价功能”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。 具体内容如下 1个星-很不满意； 2个星-不满意； 3个星-一般； 4个星-还不错； 5个星-很满意； 找了demo，删删改改，demo地址：微信小程序实现星星评价效果 需要的页面引入： json: { "usingComponents": { "star": "../../components/star/star" }, "navigationBarTitleText": "评价" } wxml: <star></star> 组件代码： wxml： <!--components/star/star.wxml--> <view class='buy' bindtap='showBuyModal'>测试版评价本次维修服务</view> <!-- 点击弹出遮罩层 --> <view class="cover_screen" bindtap="hideBuyModal" wx:if="{{showModalStatus}}"></view> <!-- 点击立即购买 弹窗 --> <view animation="{{animationData}}" class="buy_box" wx:if="{{showModalStatus}}"> <view class='startitle'>{{tatle}}</view> <!-- 星星start --> <view class='container'> <view class='evaluate_contant'> <!--外层循环控制有几个评价条目 --> <block wx:for='{{evaluate_contant}}' wx:key='' wx:for-index='idx'> <view class='evaluate_item'> <view class='evaluate_title'>{{staritem}}</view> <!--星星评价 --> <view class='evaluate_box'> <!--内层循环展示每个评价条目的星星 --> <block wx:for="{{stars}}" wx:key=''> <image class="star-image" style="left: {{item*80}}rpx" src="{{scores[idx] > item ?normalSrc:selectedSrc}}"> <view class="staritem" data-score="{{item + 1}}" data-idx='{{idx}}' bindtap="selectRight"></view> </image> </block> </view>
</view> </block> <view class="evaluation">{{evaluation}}</view> <!-- <button class='sub_button' bindtap='submit_evaluate' type='primary'>提交</button> --> </view> </view> <!-- 星星end --> <view class="detail-btn"> <button class="done-person" style='border:4rpx solid #FF4A4A;background-color: #FFFFFF;font-weight: bold;color: #FF4A4A;font-size:28rpx;' bindtap='hideBuyModal' plain='{{plain}}'>取消</button> <button class="done-person" style='border:none;background-color: #FF4A4A;font-weight: bold;color: #FFFFFF;font-size:28rpx;' bindtap='submit_evaluate' plain='{{plain}}'>提交</button> <!-- <button type="primary" bindtap='hideBuyModal' class=""> 取消</button> <button type="primary" bindtap='submit_evaluate' class=""> 确定 </button> --> </view> </view> js: // components/star/star.js Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { showModalStatus: false, tatle: "您对这次服务的评价", // 星星 evaluate_contant: ['一', ], stars: [0, 1, 2, 3, 4], normalSrc: '../../image/star_gray.png', selectedSrc: '../../image/star_red.png', score: 0, scores: [0], evaluation:' ', plain:true }, /** * 组件的方法列表 */ methods: { // 星星颗数start // 提交事件 submit_evaluate: function() { console.log('评价得分' + this.data.scores) }, //点击星 selectRight: function(e) { var score = e.currentTarget.dataset.score console.log(score) this.data.scores[e.currentTarget.dataset.idx] = score let evaluation = score == 1 ? '很不满意' : (score == 2 ? '不满意' : (score == 3 ? '一般' : (score == 4 ? '还不错' : (score == 5 ? '很满意' : '')))) this.setData({ scores: this.data.scores, score: score, evaluation: evaluation }) }, // 星星颗数end // onLoad: function (options) { // console.log(options.id) // }, showBuyModal() { // 显示遮罩层 var animation = wx.createAnimation({ duration: 200, /** * http://cubic-bezier.com/ * linear 动画一直较为均匀 * ease 从匀速到加速在到匀速 * ease-in 缓慢到匀速 * ease-in-out 从缓慢到匀速再到缓慢 * * http://www.tuicool.com/articles/neqMVr * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过 * step-end 保持 0% 的样式直到动画持续时间结束 一闪而过 */ timingFunction: "ease", delay: 0 }) this.animation = animation animation.translateY(300).step() this.setData({ animationData: animation.export(), // export 方法每次调用后会清掉之前的动画操作。 showModalStatus: true }) setTimeout(() => { animation.translateY(0).step() this.setData({ animationData: animation.export() // export 方法每次调用后会清掉之前的动画操作。 } }, 200) }, hideBuyModal() { // 隐藏遮罩层 var animation = wx.createAnimation({ duration: 200, timingFunction: "ease", delay: 0 }) this.animation = animation animation.translateY(300).step() this.setData({ animationData: animation.export(), }) setTimeout(function() { animation.translateY(0).step() this.setData({ animationData: animation.export(), showModalStatus: false }) // console.log(this) }.bind(this), 200) } } }) wxss: /* components/star/star.wxss */
.buy{ margin-top: 200rpx; text-align: center; } .cover_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.2; overflow: hidden; z-index: 1000; color: #fff; } .buy_box { width: 100%; box-sizing: border-box; position: fixed; bottom: 0; left: 0; z-index: 2000; background: #fff; padding: 20rpx; overflow: hidden; } .buy_box .startitle { font-size: 28rpx; text-align: center; line-height: 40rpx; color: #333; padding: 20rpx 0; } /* 星星 */ .footer_end{ display: flex } .footer_end button{ width: 30%; } /* 插入星星 */ /*评价区域 */ .container .evaluate_contant .evaluate_item { font-size: 30rpx; color: gray; margin-left: 20rpx; margin-top: 30rpx; } /*评价标题 */ .container .evaluate_contant .evaluate_item .evaluate_title { display: inline-block; } /*评价盒子 */ .container .evaluate_contant .evaluate_item .evaluate_box { position: absolute; left: 220rpx; width: 100%; display: inline-block; } /*星星评价的每个图片 */ .container .evaluate_contant .evaluate_item .evaluate_box .star-image { position: absolute; width: 40rpx; height: 40rpx; src: "../../image/star_gray.png"; } /* 评价对应内容 */ .evaluation{ text-align: center; margin: 30rpx 0 40rpx; color: #535353; } /*星星区域 */ .container .evaluate_contant .evaluate_item .evaluate_box .star-image .staritem { position: absolute; top: 0rpx; left: 0rpx; width: 40rpx; height: 40rpx; } /*按钮 */ .container .evaluate_contant .sub_button { height: 60rpx; font-size: 30rpx; line-height: 60rpx; margin: 20rpx; } .detail-btn{ width: 750rpx; display: flex; justify-content: space-around; align-items: center; margin-bottom: 100rpx; } .done-person{ width:220rpx; height:72rpx; border-radius:36rpx; } 现在大家对于微信小程序实现五星评价功能的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
