微信小程序星级评分和展示

正文：用户点击第几颗星星就显示为几星评分

wxml文件代码

<view class='assess_sec_img'><block wx:for="{{empty_star}}" wx:key="index"><image catchtap='in_xin' id='{{index+1}}' data-in='use_sc2' src='../../img/star_img.png' class='assess_star_img'></image></block><block wx:for="{{full_star}}" wx:key="index"><image catchtap='in_xin' id='{{index+1}}' data-in='use_sc' src='../../img/star_imgs.png' class='assess_star_img'></image></block>
</view>

wxss文件代码

.assess_sec .assess_sec_star .assess_sec_img{width: 530rpx;height: 160rpx;display: flex;align-items: center;float: left;
}.assess_sec .assess_sec_star .assess_sec_img .assess_star_img{width: 47rpx;height: 46rpx;float: left;margin: 0 10rpx;
}

js文件代码

Page({/*** 页面的初始数据*/data: {empty_star: 0,         //未选择星星full_star: 5           //已选择星星},// 用户给评分in_xin: function(e) {var that = this;console.log(e);var in_xin = e.currentTarget.dataset.in;var empty_star;if (in_xin === 'use_sc2') {empty_star = Number(e.currentTarget.id) - 1;console.log(empty_star);} else {empty_star = Number(e.currentTarget.id) + that.data.empty_star;console.log(empty_star);}this.setData({empty_star: empty_star,full_star: 5 - empty_star})},})

原文链接：https://blog.csdn.net/qq_3571...

微信小程序星级评分和展示相关推荐

[微信小程序]星级评分和展示(详细注释附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 星级评分分成两种情况: 一:展示后台给的评分数据二:用户点击第几颗星星就显示为几星评分; < ...
微信小程序星级评分方法
第一种方法: WXML代码: <view>星级评分 </view><view><block class="brightStars"> ...
微信小程序星级评分（例如店铺小数点评分）
示例: 首先准备三种不同的星星图片,满星.半星.空星的: 示例代码: 比如评分是小数点 4.8分,就根据相应的判断显示内容,乘以10好取余:接口返回的字段名称替换4.8就欧了: <block w ...
微信小程序星级评分 (带小数的评分/半星)
首先准备三种不同的星星图片,满星.半星.空星的: 示例代码: 比如评分是小数点 4.8分,就根据相应的判断显示内容,乘以10好取余:接口返回的字段名称替换4.8就欧了: <block wx:fo ...
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
一.前言项目中遇到的评分相关的需求其实还挺多.之前也写过网页中关于评分功能实现的文档.这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用.这次使用的还是字体,主要是字体这个 ...
微信小程序星星评分代码片段（含半星）
微信小程序星星评分代码片段(含半星) 代码思路完整代码代码片段图片资源写代码时需要一个点击星星评分的功能安卓直接用RatingBar非常轻松的解决了到了小程序,没有现成的封装方法可以用了, ...
微信小程序开发(4) 企业展示
在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发企业内部宣传展示等功能. 一.小程序主体部分一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({o ...
微信小程序实现评分，包含满星、半星，模仿豆瓣电影评分显示
微信小程序实现评分功能前言本人在用原生小程序开发时,需要用到评分功能,于是自己动手撸了一个评分显示组件.包含满星.半星功能. 废话少说,上才艺: 1.先任意创建组件,index.wxml代码如下: ...
基于微信小程序的评分小程序
文末联系获取源码开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/my ...

微信小程序星级评分和展示

微信小程序星级评分和展示相关推荐

最新文章

热门文章