微信小程序之五星评分栏展示

原创 2018年04月16日 11:43:41

话还是不多说了,还是直接上干货吧.

空心1.1.png;

半星1.2.png;

整星1.3.png 

wxml:

<view class="contain">
<view class="title"><text>评价该课程</text></view>
<view class="star">
<block wx:for="{{stars}}">

  <image class="star-image" style="left: {{item*80}}rpx" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">

    <view class="item" style="left:0rpx" data-key="{{item+0.5}}" bindtap="selectLeft"></view>

    <view class="item" style="left:40rpx" data-key="{{item+1}}" bindtap="selectRight"></view>

  </image>

</block>
</view>
<view class="mark">{{key}}分</view> 
<view class="input">
<input placeholder-class='ph' placeholder="请输入您要评价的内容"></input>
</view>
<view class='btn'>
<button bindtap='tijiao' type='text'>提交</button>
</view>
</view>
js:
var app = getApp()

Page({

  data: {

    stars: [0, 1, 2, 3, 4],

    normalSrc: '../../image/1.1.png',

    selectedSrc: '../../image/1.3.png',

    halfSrc: '../../image/1.2.png',

    key: 0,//评分

  },

  onLoad: function () {

  },

  //点击右边,半颗星

  selectLeft: function (e) {

    var key = e.currentTarget.dataset.key

    if (this.data.key == 0.5 && e.currentTarget.dataset.key == 0.5) {

      //只有一颗星的时候,再次点击,变为0颗

      key = 0;

    }
    this.setData({

      key: key

    })



  },

  //点击左边,整颗星

  selectRight: function (e) {

    var key = e.currentTarget.dataset.key
    this.setData({

      key: key

    })

  },
  tijiao: function () {
    wx.navigateBack({

    })
  }

})
wxss:
.contain{
  background: white;
}
.title{
  text-align: center;
  margin-top:170rpx;
  font-size:16px;
}
.star{
  position: absolute;
  top:230rpx;
  left:120rpx;
}
.mark{
  position: absolute;
  top:268rpx;
  left:560rpx;
}
.star-image {

  position: absolute;

  top: 25rpx;

  width: 80rpx;

  height: 80rpx;
  
  src: "../../images/normal.png";

}



.item {

  position: absolute;

  top: 25rpx;

  width: 40rpx;

  height: 80rpx;

}
.input{
  margin: 40rpx;
  margin-top:170rpx;
  height: 350rpx;
  border: 1px solid rgb(245,245,245);
  border-radius: 10rpx;
  background: rgb(245,245,245);
  font-size:14px;
  color:black;
}
.ph{
  color:#aaa;
  font-weight:300;
}
.btn{
  margin: 40rpx;
  font-weight: 500;
}
.btn button{
  color: white;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #3c3;
}

结尾:给为赏点币吧

微信小程序开发之五星评分

一位同学说要写五星评分.要有半颗星的评分. 于是我做了个玩具. gif: 代码: 1.index.wxml ...
  • qq_31383345
  • qq_31383345
  • 2016-12-13 23:53:42
  • 21125

微信小程序-五星评分功能

最近要做一个在微信小程序五星评分的功能代码如下:jsPage({ /** * 页面的初始数据 */ data: { starFlag:5 }, changeOne...
  • mcYang0929
  • mcYang0929
  • 2017-12-01 14:42:36
  • 3280

微信小程序之五星评分效果

自己写的Demo  数据是自己模拟的 希望下面的内容能够对大家有所帮助,不喜勿喷!下面上代码date 数据格式:var dateList = [ { userId: 0, name: '...
  • Jensen_Yao
  • Jensen_Yao
  • 2018-03-01 15:58:01
  • 119

小程序制作五星点评(默认五星)

在小程序的开发过程中,我们会遇到一种情况,就是在制作五星点评的时候,默认五颗星星都是要亮的。这里我们就要分享一下自己做默认五星的心得。在这里我们先看一下效果图:我们在订单页面的时候,当点击“晒单”按钮...
  • qq_24147051
  • qq_24147051
  • 2017-01-12 15:37:32
  • 3441

[微信小程序]星级评分和展示(详细注释附效果图)

微信小程序开发交流群(173683895)
  • qq_35713752
  • qq_35713752
  • 2017-12-11 10:51:06
  • 4678

微信小程序,五星评价

  • 2017年11月06日 10:49
  • 13KB
  • 下载

微信小程序开发(十一)五星好评

在之前的原生iOS开发中写了一个《【iOS】星星评分控件HGDQStars》,这个在原生开发里面可以给出0~5之间的任意一个分数,使用起来也很方便。 最近在做小程序开发,也需要一个五星好评的控件,这...
  • zhuming3834
  • zhuming3834
  • 2017-06-27 09:10:22
  • 879

微信小程序-五星评分

.wxml
  • Kaiccy
  • Kaiccy
  • 2017-06-23 11:54:59
  • 840

微信小程序自定义组件:对话框、指示器、五星评分...

https://github.com/skyvow/wux 用微信web开发者工具打开dist目录(请注意,是dist目录,不是整个项目) 使用 组件的wxml结构请看dist/...
  • huningjun
  • huningjun
  • 2018-01-09 17:39:40
  • 247

小程序实现五星点评

先看一下效果图:如上图所示,这里我们要添加三个五星点评。我们这里之讲解一下,“描述相符”的点评WXML代码 描述相符 ...
  • qq_24147051
  • qq_24147051
  • 2016-12-20 10:22:47
  • 2416
收藏助手
不良信息举报
您举报文章:微信小程序之五星评分栏展示
举报原因:
原因补充:

(最多只允许输入30个字)