微信小程序如何实现用户对商品的长尾词星级评价功能？

本文共计657个文字，预计阅读时间需要3分钟。

原文示例：本文实例为大家分享了微信小程序星级评价的整体代码，供大家参考，具体内容如下 + 效果图 + wxml + view class='assess-star' + view class='star-wrap' + view class='star-item' + wx:for={{stars}} + wx:key='' + style='backgr'

改写后：“本文展示了微信小程序中星级评价功能的代码示例，包括效果图和关键部分代码，具体如下： + 星级评价效果 + wxml代码：view class='assess-star' view class='star-wrap' view class='star-item' wx:for={{stars}} wx:key= style='background:'

本文实例为大家分享了微信小程序星级评价的具体代码，供大家参考，具体内容如下

效果图

wxml

<view class='assess-star'> <view class='star-wrap'> <view class='star-item' wx:for="{{stars}}" wx:key="" style='background:url("{{item.flag==1?item.lightImg:item.blackImg}}") no-repeat top;background-size:100%;' data-index="{{index}}" bindtap='starClick'></view> </view> <view class='star-desc'>{{starDesc}}</view> </view>

wxss

.assess-star { margin-top: 20rpx; } .star-wrap { width: 50vw; margin: 10rpx auto 10rpx auto; } .star-item { display: inline-block; height: 60rpx; width: 60rpx; margin-right: 10rpx; } .star-desc { font-size: 30rpx; font-family: PingFangSC-Regular; font-weight: 400; color: rgba(243, 162, 0, 1); text-align: center; }

js

Page({ /** * 页面的初始数据 */ data: { starDesc: '非常满意，无可挑剔', stars: [{ lightImg: '../../../../images/xing.png', blackImg: '../../../../images/xing1.png', flag: 1, message: '非常不满意，各方面都很差' }, { lightImg: '../../../../images/xing.png', blackImg: '../../../../images/xing1.png', flag: 1, message: '不满意，比较差' }, { lightImg: '../../../../images/xing.png', blackImg: '../../../../images/xing1.png', flag: 1, message: '一般，还要改善' }, { lightImg: '../../../../images/xing.png', blackImg: '../../../../images/xing1.png', flag: 1, message: '比较满意，仍要改善' }, { lightImg: '../../../../images/xing.png', blackImg: '../../../../images/xing1.png', flag: 1, message: '非常完美，无可挑剔' }] }, // 选择评价星星 starClick: function(e) { var that = this; for (var i = 0; i < that.data.stars.length; i++) { var allItem = 'stars[' + i + '].flag'; that.setData({ [allItem]: 2 }) } var index = e.currentTarget.dataset.index; for (var i = 0; i <= index; i++) { var item = 'stars[' + i + '].flag'; that.setData({ [item]: 1 }) } this.setData({ starDesc: this.data.stars[index].message }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { }, /** * 生命周期函数--监听页面显示 */ onShow: function() { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { } })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。