小程序制作五星点评（默认五星）

在小程序的开发过程中，我们会遇到一种情况，就是在制作五星点评的时候，默认五颗星星都是要亮的。这里我们就要分享一下自己做默认五星的心得。

在这里我们先看一下效果图：

我们在订单页面的时候，当点击“晒单”按钮的时候我们跳转到评价的页面。

（图一：订单列表）

（图二：评价）

在这里我们只看一下“描述相符的五星”

WXML代码：

<!--星星评价--><view class="comment1-description" style="display:flex;flex-direction:row;"><view class="comment1-description1">描述相符</view><view  class="star-pos" style="display:flex;flex-direction:row;"><view class="starsM  {{flag2>=1? '': 'hideStar'}}"  bindtap="changeColor11"></view><view class="starsM  {{flag2>=2? '': 'hideStar'}}"  bindtap="changeColor12"></view><view class="starsM  {{flag2>=3? '': 'hideStar'}}"  bindtap="changeColor13"></view><view class="starsM  {{flag2>=4? '': 'hideStar'}}"  bindtap="changeColor14"></view><view class="starsM  {{flag2>=5? '': 'hideStar'}}"  bindtap="changeColor15"></view></view></view>

JS代码：

Page({data:{flag2:5},changeColor11:function(){var that = this;that.setData( {flag2: 1});},changeColor12:function(){var that = this;that.setData( {flag2:2});},changeColor13:function(){var that = this;that.setData( {flag2: 3});},changeColor14:function(){var that = this;that.setData( {flag2:4});},changeColor15:function(){var that = this;that.setData( {flag2: 5});}
})

WXSS代码：

.comment1-description{margin-top: 35rpx;
}
.comment1-description1{font-family: PingFangSC-Regular;font-size: 28rpx;color: #333333;margin-left: 30rpx;
}
.star-pos {position: absolute;right: 0px;margin-right: 40rpx;
}
.comment1-description .star-pos .hideStar{z-index: 2;background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star(灰)@1.5x.png");width: 83rpx;height: 43rpx;background-size: 43rpx 43rpx;background-position: center center;background-repeat: no-repeat;
}.starsM{z-index: 1;width: 83rpx;height: 43rpx;background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star@1.5x.png");background-size: 43rpx 43rpx;background-position: center center;background-repeat: no-repeat;
}

我们在这里的原理呢？接下来分析：

WXML代码里面，我们给每一颗星星通过bindtap绑定一个事件changeColor11，changeColor12…等等五个事件。过个点击事件来改变flag2的默认值。

JS代码里面,我们默认flag2的值是5。然后里面可以调用WXML里面的事件。

WXSS中，我们通过starsM让所有星星都变亮，通过hideStar让所有的星星都变灰色。

小程序制作五星点评（默认五星）相关推荐

菜鸡教程（1）：简易游戏每周推荐小程序制作
写在前面: 1. 阅读本文最好具备一定html+css+js基础,并已成功注册微信小程序,成功下载了开发工具 2.菜鸡菜笔,如有不正,还请大佬们不吝惜赐教接下来开始小程序的制作 1.首先 ...
微信小程序｜使用小程序制作一个核酸检测点查询工具
小程序创建小程序申请腾讯地图用户key 实现小程序界面全国省市区数据 API 提交资料认证并申请接口拼接参数调用接口渲染数据优化细节出门在外,没有核酸证明寸步难行,此文将教你如何通过小程序 ...
微信小程序｜使用小程序制作一个马赛克处理工具
此文主要使用微信小程序制作一个马赛克处理工具,这个场景在生活中也非常常见,例如新闻之类有些视频或者图片不想给大众展示就会将其和谐掉,这就是马赛克应用. 开发步骤功能开发实现API 接口响应开发步 ...
使用小程序制作一个音乐播放器
此文主要通过小程序制作一个音乐播放器,实现轮播.搜索.播放.快进.暂停.上一曲.下一曲等功能. 一.创建小程序二.设计页面三.接口渲染一.创建小程序访问微信公众平台,点击账号注册. 选择小程序 ...
零基础也能学会的微信小程序制作带分享按钮的视频列表页
零基础也能学会的微信小程序制作横向滚动布局准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 动手做起来吧~ index.wxml 学习笔记属性说明 s ...
微信小程序傻瓜制作_盘点：微信小程序制作平台有哪些
如今各行各业商家的流程获取成本不断上升,想要获取更多流量,就得多拓展新的渠道.而微信小程序,由于开启方便.依托于微信这个十亿流量的大平台.流量入口多,已经成了众多知名品牌的选择.利用小程序,商家可以从 ...
代金券制作小程序秒代金券_微信小程序制作工具与方法
小程序日益火爆,激发了大量商户新的开发需求,租房,购物,出行等场景,都不难见到它的踪影,这也让没有入局小程序的企业开始着急,真分夺秒的着手布局小程序,俗话说,磨刀不误砍柴工,在布局之前,小程序制作流程 ...
小程序确定取消弹窗_浅析微信小程序modal弹窗关闭默认会执行cancel问题
在我们使用小程序的modal组件时候,有的时候会碰到一个问题,那就是弹框的关闭,我们并没有选择取消或确定,而是点击弹框之外的部分,这个时候弹框会关闭,按理来说不会触发取消和确定的绑定事件,但是有的时候 ...
小程序制作预算_小程序商城制作多少钱
现在有做微信小程序商城需求的企业越来越多,在选择小程序制作公司的时候,很多公司上来就报价几万,导致价格太贵让用户望而却步,其实微信小程序制作的价格是不同的,并且不同的制作公司报价也不一样,那么做一个微 ...
拼团小程序源码_拼团小程序制作干货教程
相信大家的微信都经常能收到快来帮我拼一下,帮我砍一下的朋友消息,其中做的最好的就是拼多多了,可能很多商家都用过拼团,但对拼团还是一知半解.下面就给大家讲解下拼团小程序的基本知识和要怎么做一个拼团小程序 ...

小程序制作五星点评（默认五星）

在小程序的开发过程中，我们会遇到一种情况，就是在制作五星点评的时候，默认五颗星星都是要亮的。这里我们就要分享一下自己做默认五星的心得。

在这里我们先看一下效果图：

我们在订单页面的时候，当点击“晒单”按钮的时候我们跳转到评价的页面。

WXML代码：

JS代码：

WXSS代码：

WXML代码里面，我们给每一颗星星通过bindtap绑定一个事件changeColor11，changeColor12…等等五个事件。过个点击事件来改变flag2的默认值。

JS代码里面,我们默认flag2的值是5。然后里面可以调用WXML里面的事件。

WXSS中，我们通过starsM让所有星星都变亮，通过hideStar让所有的星星都变灰色。

小程序制作五星点评（默认五星）相关推荐

最新文章

热门文章