微信小程序开发之——星星评分等级显示
一 概述
本文要实现如下所示的效果：输入要显示的评价等级，界面上就有几颗星亮起，最多5颗
二 思路
- 界面布局中：五张图片横向排列，使用wx:if和wx:else判断显示哪一个
- 在逻辑文件中，将要显示的评价个数，转换为数组(1-显示亮色，0-显示灰色)
- 布局文件中，根据转换后的数组，显示评价结果
三 代码
3.1 模板文件(template-star)
template-star.wxml
<template name="starsTemplate"><view class='stars-container'><view class='stars'><block wx:for="{{stars}}" wx:for-item="i" wx:key="position"><image wx:if="{{i}}" src='/images/icon_star.png'></image><image wx:else src='/images/icon_star_empty.png'></image></block></view></view>
</template>
template-star.wxss
.stars-container {display: flex;flex-direction: row;
}.stars {display: flex;flex-direction: row;height: 50rpx;margin-right: 0rpx;margin-top: 6rpx;
}.stars image {padding-left: 0rpx;height: 40rpx;width: 40rpx;
}
3.2 模板文件使用
start.wxml(界面显示)
<import src="../template/template-star" />
<template class="mytemplate" is="starsTemplate" data="{{stars:stars}}" />
start.wxss
@import "../template/template-star.wxss";
page {background: gray;
}
start.js
onLoad: function (options) {var startNum = 1;var array = new Array(5);for (let index = 0; index < array.length; index++) {if (index < startNum) {array[index] = 1;} else {array[index] = 0;}}console.log(array);this.setData({stars: array})}
3.3 说明
- 数组转换为数组的逻辑，放在了要显示界面
- 将数字转换为数组的逻辑，放在模板文件中
四 代码优化
4.1 模板修改
template-star.wxml
<template name="starsTemplate"><view class='stars-container'><view class='stars'><block wx:for="{{startNumtoArray(stars)}}" wx:for-item="i" wx:key="position"><image wx:if="{{i}}" src='/images/icon_star.png'></image><image wx:else src='/images/icon_star_empty.png'></image></block></view></view>
</template>
<!--对数据进行处理-->
<wxs module="startNumtoArray">module.exports = function (stars) {//var array = new Array(5);//console.log(stars);//var array = [length = 5];var array = [0, 0, 0, 0, 0];console.log(typeof array);//console.log(array.length);for (var index = 0; index < array.length; index++) {if (index < stars) {array[index] = 1;} else {array[index] = 0;}}console.log(array);return array;}
</wxs>
4.2 模板使用文件(start.wxml)
onLoad: function (options) {var startNum = 1;this.setData({stars: startNum})}
五 参考代码
- 微信小程序使用template标签实现五星评分
- 参考代码
微信小程序开发之——星星评分等级显示相关推荐
- 微信小程序开发之五星评分
一位同学说要写五星评分.要有半颗星的评分. 于是我做了个玩具.有空了做模块化,这代码看不下去了. gif: 代码: 1.index.wxml <block wx:for="{{star ...
- 微信小程序开发：按Pages编译显示页面
最近刚开始接触微信小程序开发,在慢慢学习,开始点击编译总是进入一个界面运行所以比较苦恼,于是找到以下解决方案. 解决方案一:选择"普通编译模式",会进入app.json文件下pag ...
- 从实战学习微信小程序-电商星星评分功能（五）
现在,大多数电商系统都是通过五颗星星来进行商品评分的,所以我们要准备两种图片:实心星星和空心星星(如果你想要半星评价也可以加上一个半实星星,实现原理一样) 源码链接下载:https://downloa ...
- 微信小程序开发--如何在swiper中显示两个item以及下一个item的部分内容
如何在swiper中显示两个item以及下一个item的部分内容 我所实现的效果 我实现的代码 <!--图片轮播图--><!--要展示两个item 以及下一个item的部分内容,ci ...
- 微信小程序开发之——视图全屏显示
一 概述 本文介绍两种将view全屏显示的方式: 布局文件设置宽度和高度 代码中获取到屏幕的宽度和高度,设置到view上 二 布局设置宽高全屏 2.1 布局文件(index.wxml) <vie ...
- 01.微信小程序开发之环境搭建
在开发之前你要有微信开发者工具,下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 这里我要假设大家有已经拿到了 ...
- 《微信小程序》微信小程序开发实例
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
- 2020年高校微信小程序开发大赛全国三等奖——《重邮指路牌》
文章目录 前言 证书 比赛流程回顾 开发小程序阶段 提交项目策划书阶段 线上答辩阶段 前言 今年疫情期间由于闲来无事就自学微信小程序并报名5月份的高校微信小程序开发大赛,一方面是锻炼开发能力,一方面是 ...
- 微信小程序开发分销制度济南_微信小程序分销规则你清楚吗?
大家在刚开始接触小程序的时候,好多人都被其中的分销功和简洁应用的模式所带来的红利所吸引,但到如今,使用小程序的用户是多了起来,但真正把小程序运营好的商家却很少.这是为什么呢,原因就在于,商家还不会利用 ...
最新文章
- 为什么c程序里一定要写main函数
- 读入excel中的数据到数据库中
- mac系统学习和快捷键
- mysql中出现 xC4 xDD_mysql数据库调优总结(二)
- 【研究院】浅析小米与它的AI生态
- linux oracle pam,Linux技术之深入Linux PAM 体系结构（一）
- 关于 Nginx 0day 漏洞，需要采取哪些措施？
- 卡诺图简单逻辑化简与五变量卡诺图化简
- Update join 修正数据
- WPF3D图片轮播效果
- 人工智能行业每日必读（02·03）
- BZOJ 1127 [POI2008]KUP 最大子矩阵
- IDEA TODO标签使用
- 论文降重的方法是什么？
- 第37天学习——CSS
- python s append_Python语句序列s=[1,2,3,4];s.append([5,6]);print(len(s))的运行结果是______。...
- 这几个一键文字转语音的方法你可不能错过
- java web中英翻译_中英文翻译简单web项目示例(3)
- OATS PK Pairwise Testing
- 未来5年最有“钱景”的行业！两会上指明了~