微信小程序实现的五星评价功能示例

本文实例讲述了微信小程序实现的五星评价功能。分享给大家供大家参考,具体如下:

实现五星评价功能,效果图如下:

.wxml文件:

<view class="star-title">1、品质效果</view>
<view class="star-pos">
  <image class='stars' bindtap="changeColor" data-index='0' data-no="{{item}}" wx:for="{{stardata}}"
        src="{{flag[0]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />
  <view style='margin-left: 30rpx;'>{{startext[0]}}</view>
</view>
<view class="star-title">2、服务质量</view>
 <view class="star-pos">
  <image class='stars' bindtap="changeColor" data-index='1' data-no="{{item}}" wx:for="{{stardata}}"
          src="{{flag[1]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />
  <view style='margin-left: 30rpx;'>{{startext[1]}}</view>
</view>
<view class="star-title">3、综合管理</view>
<view class="star-pos">
  <image class='stars' bindtap="changeColor" data-index='2' data-no="{{item}}" wx:for="{{stardata}}"
        src="{{flag[2]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />
  <view style='margin-left: 30rpx;'>{{startext[2]}}</view>
</view>

.js 文件:

page: ({
  data: {
      flag:[0, 0, 0],
      startext: ['', '', ''],
      stardata: [1, 2, 3, 4, 5],
    },
    // 五星评价事件
    changeColor: function (e) {
      var index = e.currentTarget.dataset.index;
      var num = e.currentTarget.dataset.no;
      var a = 'flag[' + index + ']';
      var b = 'startext[' + index + ']';
      var that = this;
      if(num == 1) {
        that.setData({
          [a]: 1,
          [b]: '非常不满意'
        });
      } else if (num == 2){
        that.setData({
          [a]: 2,
          [b]: '不满意'
        });
      } else if (num == 3) {
        that.setData({
          [a]: 3,
          [b]: '一般'
        });
      } else if (num == 4) {
        that.setData({
          [a]: 4,
          [b]: '满意'
        });
      } else if (num == 5) {
        that.setData({
          [a]: 5,
          [b]: '非常满意'
        });
      }
  },
})

.wxss文件:

.star-pos {
  margin: 10rpx;
  display: flex;
  flex-direction: row;
}
.stars{
  width: 40rpx;
  height: 40rpx;
  margin-left: 30rpx;
}

希望本文所述对大家微信小程序开发有所帮助。

(0)

相关推荐

  • 微信小程序使用template标签实现五星评分功能

    前言 微信小程序特点"无须安装,无须卸载,触手可及,用完即走",适合轻量级应用快速开发.小程序模版思想是它开发的核心思想,可以帮助开发者减少很多重复代码,我们来看看怎么在小程序中实现市面上常用的评分组件, 看看效果图: 创建模版 wxml文件: 以<template>为根节点,添加name属性用来区分不同模版: <template name="starsTemplate"> <view class='stars-container'&g

  • 微信小程序实现星星评价效果

    本文实例为大家分享了微信小程序实现星星评价效果的具体代码,供大家参考,具体内容如下 代码实现 wxml文件 <!--pages/evaluatepage/evaluatepage.wxml--> <view class='container'> <view class='evaluate_contant'> <!--外层循环控制有几个评价条目 --> <block wx:for='{{evaluate_contant}}' wx:key='' wx:f

  • 微信小程序 五星评分(包括半颗星评分)实例代码

    微信小程序 五星评分 一位同学说要写五星评分.要有半颗星的评分. 于是我做了个玩具.有空了做模块化,这代码看不下去了. 代码: 1.index.wxml <!--index.wxml--> <block wx:for="{{stars}}"> <image class="star-image" style="left: {{item*150}}rpx" src="{{key > item ?(key-

  • 微信小程序实现星级评价效果

    本文实例为大家分享了微信小程序实现星级评价效果的具体代码,供大家参考,具体内容如下 效果预览: wxml代码部分: <view class='topMaxBox'> <view class='topLeft' style='width: {{ imgW }}px; height: {{ imgW }}px; flex: {{ imgW }}px 0 0;'> <image src='http://img02.tooopen.com/images/20150928/tooope

  • 微信小程序 五星评分的实现实例

    微信小程序 五星评分 五星级评分效果: <view> <view class="zan-font-16 my-ib" bindtap="myStarChoose"> <block wx:for="{{starMap}}"> <text wx:if="{{star>=index+1}}" style="padding-right: .5em" class=&qu

  • 微信小程序 五星评价功能的实现

    微信小程序 五星评价功能 话不多说,我们来看一下效果图: 要实现的效果:点击到第几颗星,就要显示到第几颗星, 接下来直接查看源码: <view class="l-evalbox row"> <text class="l-evaltxt">满意度:</text> <view class="l-evalist flex-1" bindtap="chooseicon"> <ico

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

    本文实例为大家分享了微信小程序实现星级评分和展示的具体代码,供大家参考,具体内容如下 星级评分分成两种情况: 一:展示后台给的评分数据   二:用户点击第几颗星星就显示为几星评分; 直接上代码 wxml部分 <view> <view>一:显示后台给的评分</view> <block wx:for="{{one_1}}" wx:key="item"> <image src='../../image/star.png

  • 微信小程序五星评分效果实现代码

    微信小程序五星评分效果实现代码 很多做过电商项目的朋友会经常用到评分的功能,我这里正好写了一个例子,发出来分享一下: 我写的是5分满分制的,首先,准备3个图片, ,像这样的,分别代表分数为0,0.5,1 时的状态, 效果图:(以3.5为例) 然后上代码: js: function pingfenxing(pingfen){ var that=this, //这里是图片的路径,自己需要改 data={ ling:"img/pingfen0.png", zheng:"img/pi

  • 微信小程序实现的五星评价功能示例

    本文实例讲述了微信小程序实现的五星评价功能.分享给大家供大家参考,具体如下: 实现五星评价功能,效果图如下: .wxml文件: <view class="star-title">1.品质效果</view> <view class="star-pos"> <image class='stars' bindtap="changeColor" data-index='0' data-no="{{ite

  • 微信小程序如何实现五星评价功能

    这篇文章主要介绍了微信小程序如何实现五星评价功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果 要实现的效果:点击到第几颗星,就要显示到第几颗星,<br data-filtered="filtered">///////////////// 接下来直接查看源码: <view class="l-evalbox row"> <text class="l-evaltxt&quo

  • 微信小程序实现添加手机联系人功能示例

    本文实例讲述了微信小程序实现添加手机联系人功能.分享给大家供大家参考,具体如下: 1.效果展示   2.关键代码 1)WXML文件 <view bindlongtap="phoneNumTap">{{phoneNum}}</view> 2)JS文件 Page({ data:{ phoneNum:'12345678901'//测试用的号码,并非真实号码 }, // 长按号码响应函数 phoneNumTap:function(){ var that=this; //

  • 微信小程序实现的自定义分享功能示例

    本文实例讲述了微信小程序实现的自定义分享功能.分享给大家供大家参考,具体如下: 大家都知道,小程序有分享的功能,可以分享整个程序,也可以自定义分享的内容 onShareAppMessage 在 Page 中定义 onShareAppMessage 函数,设置该页面的分享信息. 只有定义了此事件处理函数,右上角菜单才会显示"分享"按钮 用户点击分享按钮的时候会调用 此事件需要 return 一个 Object,用于自定义分享内容 示例代码: Page({ onShareAppMessag

  • 微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)

    本文实例讲述了微信小程序导航栏滑动定位功能.分享给大家供大家参考,具体如下: 实现的效果 实现的原理 1. 通过对scroll的监听获取滚动条的scrollTop值; 2. 在导航的class判断scrollTop; 3. 切换position:fixed与position:relative. WXML <view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="f

  • 微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】

    本文实例讲述了微信小程序实现发送模板消息功能.分享给大家供大家参考,具体如下: 一.获取access_token access_token是接口调用的凭证,目前有效期为两个小时,需要定时刷新,重复获取将导致上次获取的access_token失效.(注:不建议每次调用需要access_token的接口,都去重新获取access_token,会导致失败) 获取access_token的接口地址: https://api.weixin.qq.com/cgi-bin/token?grant_type=c

  • 微信小程序实现的一键拨号功能示例

    本文实例讲述了微信小程序实现的一键拨号功能.分享给大家供大家参考,具体如下: 1. 在.wxml文件中绑定拨号事件 <button type="default" bindtap="calling">拨打电话</button> 2. 在.js文件中加入逻辑代码 calling: function () { wx.makePhoneCall({ phoneNumber: '***************', success: function (

  • 微信小程序实现的图片保存功能示例

    本文实例讲述了微信小程序实现的图片保存功能.分享给大家供大家参考,具体如下: 微信小程序保存图片分为两步: 1.下载文件资源到本地,客户端直接发起一个 HTTP GET 请求,返回文件的本地临时路径. 即:调用函数wx.downloadFile({}) 2.保存图片到系统相册. 即:调用函数wx.saveImageToPhotosAlbum({}) 具体代码如下: .wxml <button data-image='{{图片路径}}' bindtap="saveImage" &g

  • 微信小程序实现带刻度尺滑块功能

    摘要: 与自带的slider不同的是,它是通过手势滑动标尺得到取值,而不是通过滑动滑块本身. 效果图 场景 当一屏显示不下,例如年龄体重选择,金额选择等大区间需要的选择器,相比自带的picker要直观一些. 思路: 先画一个scrollView 2 装进canvas lineTo画刻度线段,lineTo+fill画出三角形游标,fillText描绘文本标签 通过bindscroll监听刻度尺触摸事件 渲染取值到页面 基本布局 <scroll-view scroll-x="true"

  • 微信小程序 向左滑动删除功能的实现

    微信小程序 向左滑动删除功能的实现 实现效果图: 实现代码: 1.wxml touch-item元素绑定了bindtouchstart.bindtouchmove事件 <view class="container"> <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchst

随机推荐