微信小程序实现星星评分-整颗星星评分、半颗星星评分、任意颗星星展示

最新推荐文章于 2024-04-25 15:34:30 发布
最新推荐文章于 2024-04-25 15:34:30 发布
阅读量4.1k 收藏 27
点赞数 10
分类专栏： 微信小程序 文章标签： 小程序 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43884155/article/details/109471090
版权

一、实现整颗星星评分（默认一颗星）

1.效果图
在这里插入图片描述
2.准备图片
在这里插入图片描述

3.remark.wxml

<view class="stars">
   <view wx:for="{{stars}}" wx:key="index" data-index="{{index}}" bindtap='score'>
     <image src="{{index > 0 && item.flag == 1 ? item.bgImg : item.bgfImg}}"></image>
   </view>
 </view>

4.remark.wxss

.stars {
  display: flex;
}

.stars view {
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
}

.stars view image {
  width: 100%;
  height: 100%;
}

5.remark.js

  data: {
    // 星星列表
    stars: [
      {
        flag: 1,
        bgImg: "/img/farmers/icon_bsta_no.png",
        bgfImg: "/img/farmers/icon_bstar1.png"
      },
      {
        flag: 1,
        bgImg: "/img/farmers/icon_bsta_no.png",
        bgfImg: "/img/farmers/icon_bstar2.png"
      },
      {
        flag: 1,
        bgImg: "/img/farmers/icon_bsta_no.png",
        bgfImg: "/img/farmers/icon_bstar3.png"
      },
      {
        flag: 1,
        bgImg: "/img/farmers/icon_bsta_no.png",
        bgfImg: "/img/farmers/icon_bstar4.png"
      },
      {
        flag: 1,
        bgImg: "/img/farmers/icon_bsta_no.png",
        bgfImg: "/img/farmers/icon_bstar5.png"
      }
    ],
    star_num: 1,  // 默认1分
  },

  // 选择范围
  score: function (e) {
    var _this = this;
    for (var i = 0; i < _this.data.stars.length; i++) {
      var allItem = 'stars[' + i + '].flag';
      // 全部变为未选中状态
      _this.setData({
        [allItem]: 1
      })
    }
    var index = e.currentTarget.dataset.index;
    for (var i = 0; i <= index; i++) {
      var item = 'stars[' + i + '].flag';
      // 选中项及以前，变为选中状态
      _this.setData({
        [item]: 2,
      })
    }
    // 评分
    _this.setData({
      star_num: index + 1 // 评分
    })
  },

二、实现半颗星星评分（默认半颗星）

1.效果图
在这里插入图片描述
2.准备图片
在这里插入图片描述

3.remark1.wxml

<view class="stars">
  <view wx:for="{{stars}}" wx:key="index">
    <image src="{{index > 0 && item.flag1 == 1 ? item.bgImgL : item.bgfImgL}}" data-index="{{index}}" bindtap='scoreL'>
    </image>
    <image src="{{item.flag2 == 1 ? item.bgImgR : item.bgfImgR}}" data-index="{{index}}" bindtap='scoreR'></image>
  </view>
</view>

4.remark1.wxss

.stars {
  display: flex;
  margin: 200rpx 0;
}

.stars view {
  position: relative;
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
}

.stars view image:nth-of-type(1) {
  width: 50%;
  height: 100%;
  margin-right: -2rpx;
}
.stars view image:nth-of-type(2) {
  width: 50%;
  height: 100%;
  margin-left: -1rpx;
}

5.remark1.js

  data: {
    // 星星列表
    stars: [
      {
        flag1: 1,
        flag2: 1,
        bgImgL: "/img/farmers/icon_star_1.png",
        bgfImgL: "/img/farmers/icon_star_active1.png",
        bgImgR: "/img/farmers/icon_star_2.png",
        bgfImgR: "/img/farmers/icon_star_active2.png",
      },
      {
        flag1: 1,
        flag2: 1,
        bgImgL: "/img/farmers/icon_star_1.png",
        bgfImgL: "/img/farmers/icon_star_active1.png",
        bgImgR: "/img/farmers/icon_star_2.png",
        bgfImgR: "/img/farmers/icon_star_active2.png",
      },
      {
        flag1: 1,
        flag2: 1,
        bgImgL: "/img/farmers/icon_star_1.png",
        bgfImgL: "/img/farmers/icon_star_active1.png",
        bgImgR: "/img/farmers/icon_star_2.png",
        bgfImgR: "/img/farmers/icon_star_active2.png",
      },
      {
        flag1: 1,
        flag2: 1,
        bgImgL: "/img/farmers/icon_star_1.png",
        bgfImgL: "/img/farmers/icon_star_active1.png",
        bgImgR: "/img/farmers/icon_star_2.png",
        bgfImgR: "/img/farmers/icon_star_active2.png",
      },
      {
        flag1: 1,
        flag2: 1,
        bgImgL: "/img/farmers/icon_star_1.png",
        bgfImgL: "/img/farmers/icon_star_active1.png",
        bgImgR: "/img/farmers/icon_star_2.png",
        bgfImgR: "/img/farmers/icon_star_active2.png",
      },
    ],
    star_num: 0.5,  // 默认0.5分
  },

  // 点击星星左边-半颗星
  scoreL: function (e) {
    var _this = this;
    // 全部变为未选中状态
    for (var i = 0; i < _this.data.stars.length; i++) {
      var allItem1 = 'stars[' + i + '].flag1';
      var allItem2 = 'stars[' + i + '].flag2';
      _this.setData({
        [allItem1]: 1,
        [allItem2]: 1,
      })
    }
    var index = e.currentTarget.dataset.index;
    // 选中项以前，变为选中状态
    for (var i = 0; i < index; i++) {
      var item1 = 'stars[' + i + '].flag1';
      var item2 = 'stars[' + i + '].flag2';
      _this.setData({
        [item1]: 2,
        [item2]: 2,
      })
    }
    // 选中项左边，变为选中状态
    _this.setData({
      ['stars[' + index + '].flag1']: 2,
      star_num: index + 0.5 // 评分
    })
  },
  // 点击星星右边-整颗星
  scoreR: function (e) {
    var _this = this;
    // 全部变为未选中状态
    for (var i = 0; i < _this.data.stars.length; i++) {
      var allItem1 = 'stars[' + i + '].flag1';
      var allItem2 = 'stars[' + i + '].flag2';
      _this.setData({
        [allItem1]: 1,
        [allItem2]: 1,
      })
    }
    var index = e.currentTarget.dataset.index;
    // 选中项及以前，变为选中状态
    for (var i = 0; i <= index; i++) {
      var item1 = 'stars[' + i + '].flag1';
      var item2 = 'stars[' + i + '].flag2';
      _this.setData({
        [item1]: 2,
        [item2]: 2,
      })
    }
    // 评分
    _this.setData({
      star_num: index + 1 // 评分
    })
  },

三、实现任意颗星星的展示

1.效果图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.准备图片
在这里插入图片描述

3.remark2.wxml

<view class="stars">
  <view class="star" wx:for="{{stars}}" wx:key="index">
    <!-- 整颗星星显示个数 -->
    <view class="icon_red" wx:if="{{index < int}}" style="width: 100%;">
      <image src="{{item.bgfImg}}">
      </image>
    </view>
    <!-- 非整颗星星显示个数 -->
    <view class="icon_red" wx:if="{{index == int}}" style="width: {{percent}}%;">
      <image src="{{item.bgfImg}}">
      </image>
    </view>
    <!-- 灰色星星背景 -->
    <view class="icon_grey">
      <image src="{{item.bgImg}}"></image>
    </view>
  </view>
  <!-- 评分 -->
  <view>{{remark_num}}</view>
</view>

4.remark2.wxss

.stars {
  display: flex;
  margin: 200rpx 0;
}
.star {
  position: relative;
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
}
/* 红色星星 */
.star view.icon_red {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  height: 50rpx;
  overflow: hidden;
}
/* 灰色星星背景 */
.star view.icon_grey {
  position: absolute;
  left: 0;
  top: 0;
  width: 50rpx;
  height: 50rpx;
}

.star view image {
  width: 50rpx;
  height: 50rpx;
  display: block;
}

5.remark2.js

  data: {
    // 星星列表
    stars: [
      {
        bgImg: "/img/farmers/icon_bsta_no.png",
        bgfImg: "/img/farmers/icon_bstar1.png",
      },
      {
        bgImg: "/img/farmers/icon_bsta_no.png",
        bgfImg: "/img/farmers/icon_bstar2.png",
      },
      {
        bgImg: "/img/farmers/icon_bsta_no.png",
        bgfImg: "/img/farmers/icon_bstar3.png",
      },
      {
        bgImg: "/img/farmers/icon_bsta_no.png",
        bgfImg: "/img/farmers/icon_bstar4.png",
      },
      {
        bgImg: "/img/farmers/icon_bsta_no.png",
        bgfImg: "/img/farmers/icon_bstar5.png",
      },
    ],
    // 要展示的评分
    remark_num: 2.3,
    // 整颗星的个数
    int: "",
    // 非整颗星的百分比
    percent: "",
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this = this;
    var int = Math.floor(_this.data.remark_num);  // 向下取整-得到整颗星的个数
    var percent = (_this.data.remark_num - int) * 100;  // 非整颗星的百分比
    _this.setData({
      int: int,
      percent: percent,
    })
  },
Upward Force
关注
  • 10
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
制作简单的星星评分案例
weixin_57765394的博客
05-17 354
首先在自己的电脑桌面打开 Visual Studio Code ，第二步打开进去后创建个新的画布， 第三步敲出这些代码，最后把鼠标移到五角星上（鼠标移入的效果） 源代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五角星评分案例</title> <style> * { padding: 0; margi
微信小程序实现星星评分效果
01-18
本文实例为大家分享了微信小程序实现星星评分的具体代码，供大家参考，具体内容如下 思路很简单，小星星都是一张张独立的图片，点击的时候改变图片的路径就可以了。 我是用背景图片做的，先给盒子设置背景图片为灰色...
评价星级功能实现
xushilong0812的博客
11-16 247
基于微信小程序实现 功能实现：半星，全星，灰星 半星标准：当小数点大于等于5时 显示半星其余显示灰 星星模板 wxml <!--stars.wxml--> <template name="stars"> <view class='star-container'> <view class='stars'> <block wx:for="{{arr}}" wx:for-index='xid' wx:key='xid'>
微信小程序实现星星评价效果
10-17
主要为大家详细介绍了微信小程序实现星星评价效果，支持多个条目评价，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实现展示评分结果功能
10-17
主要为大家详细介绍了微信小程序实现展示评分结果功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
同时支持多个星星评分的JS，非常实用
10-18
同时支持多个星星评分的JS，非常实用 同时支持多个星星评分的JS，非常实用 同时支持多个星星评分的JS，非常实用
微信小程序开发之——星星评分等级显示
我的博客
11-09 1657
一 概述 本文要实现如下所示的效果：输入要显示的评价等级，界面上就有几颗星亮起，最多5颗 二 思路 界面布局中：五张图片横向排列，使用wx:if和wx:else判断显示哪一个 在逻辑文件中，将要显示的评价个数，转换为数组(1-显示亮色，0-显示灰色) 布局文件中，根据转换后的数组，显示评价结果 三 代码 3.1 模板文件(template-star) template-star.wxml <template name="starsTemplate"> <view class='
vue、小程序实现星星评分功能
weixin_56848461的博客
06-30 1516
vue、小程序实现星星评分功能
微信小程序-星星评分组件（支持半星/自定义尺寸）
SCY164759920的博客
08-24 2063
微信小程序星星评分组件，支持自定义星星大小，支持半星评分。
微信小程序实现星星评分
苏苏就是小苏苏的博客
07-01 2687
1.实现效果 点击星星 =》文字相应选中 点击文字=》星星相应的选中1-5个 2.实现原理 1.默认所有星星的选中值为1,1表示不选中，2表示选中。 2.获取当前星星的index值，假设此时选中星星的index=1，表示选中为第二个星星，则对星星列表进行2次循环，设置每一项的选中值为2，当为2显示选中的星星图片，反之未选择的状态。 3.获取此时选中值为2的列表长度，此假设情况下为2，为文字设置三元样式判断，若2等于index+1即为选中状态。 4.当点击文字的时候，将data-index写成4-index
实现评价页面添加星星数量
weixin_30315905的博客
09-21 303
var num = finalnum = tempnum = 0; var lis = $(".star-box span"); //num:传入点亮星星的个数 //finalnum:最终点亮星星的个数 //tempnum:一个中间值 function fnShow(num) { ...
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
10-15
主要介绍了微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示的实现，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序实现星级评分和展示
12-29
本文实例为大家分享了微信小程序实现星级评分和展示的具体代码，供大家参考，具体内容如下 星级评分分成两种情况: 一:展示后台给的评分数据 二:用户点击第几颗星星就显示为几星评分; 直接上代码 wxml部分 一:...
景区文旅实景剧本杀小程序系统开发搭建
最新发布
mykj1551的博客
04-25 188
需要注意的是，开发小程序需要一定的技术和经验，建议团队进行合作或寻求专业的开发服务。1. 确定需求和功能：根据景区文旅实景剧本杀的特点和需求，确定系统需要具备的功能，如实景探索、剧情互动、角色扮演、任务挑战等。4. 开发后端服务：根据系统架构，开发后端服务，包括数据存储、用户管理、角色管理、剧情管理、实景管理等。5. 实景搭建和场景设计：需要与景区合作，根据剧本杀的剧情和角色，设计实景场景和道具，搭建实景环境。6. 测试和优化：完成开发后，进行系统测试和优化，确保系统的稳定性和安全性，以及用户体验。
java项目：微信小程序基于SSM框架实现的购物系统小程序【源码+数据库+毕业论文+PPT】
weixin_43860634的博客
04-25 292
java项目：微信小程序基于SSM框架实现的购物系统小程序【源码+数据库+毕业论文+PPT】
扭蛋机小程序对市场的发展有哪些推动作用？
guanpinkeji的博客
04-25 625
近几年，扭蛋机发展的非常迅猛。扭蛋机市场的发展具有非常大的潜力，通过不断创新发展，满足消费者的需求，让扭蛋机变得更加有趣。目前，在市场需求增长和科学技术的进步下，扭蛋机进行了创新发展，与互联网进行融合，打造线上扭蛋机小程序，在市场的激烈竞争中，能够让企业稳占市场。5、线上平台利用互联网技术，可以实现商家人力物力的减少，降低运营成本，进行统一管理，也能更好实现营销策略，提高利润收益。3、扭蛋机小程序为企业打造了专属的品牌形象，企业可以通过小程序与知名IP合作，推出品牌专属的商品，提高企业的品牌形象。
多客圈子交友系统 uniapp＋thinkphp6适配小程序/H5/app/api全开源，多款插件自选，支持个性定制！
DKfanfan的博客
04-25 429
多客圈子交友系统 uniapp＋thinkphp6适配小程序/H5/app/api全开源，多款插件自选，支持个性定制！
java项目：微信小程序基于SSM框架小说阅读器小程序【源码+数据库+毕业论文+PPT】
weixin_43860634的博客
04-25 326
java项目：微信小程序基于SSM框架小说阅读器小程序【源码+数据库+毕业论文+PPT】
【微信小程序从入门到精通（项目实战）】——微电影小程序
php优质创造者
04-18 3150
如果还要不懂运行不出效果可以私信博主
微信H5跳转微信小程序 wx-open-launch-weapp
01-04
微信H5跳转微信小程序的方法是使用`wx-open-launch-weapp`标签。该标签需要在微信版本7.0.12及以上以及iOS 10.3及以上或Android 5.0及以上的系统版本中才能正常使用。 要实现微信H5跳转微信小程序，你可以按照以下步骤进行操作： 1. 在需要跳转的页面中，引入微信开放标签的JS文件： ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 2. 在页面加载完成后，调用`wx.config`方法进行配置： ```javascript wx.config({ // 配置参数 }); ``` 3. 在`wx.config`方法的回调函数中，调用`wx-open-launch-weapp`标签进行跳转： ```javascript wx.ready(function() { wx.openBusinessView({ businessType: 'wx-open-launch-weapp', extraData: { appId: '小程序的AppID', path: '小程序的路径', envVersion: '开发版、体验版或正式版' } }); }); ``` 其中，`appId`是要跳转的小程序的AppID，`path`是小程序的路径，`envVersion`是小程序的版本（可以选择开发版、体验版或正式版）。 请注意，为了看到效果，你需要使用开发者工具或在手机真机上进行调试。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值