zoukankan      html  css  js  c++  java
  • 五星评分,让我告诉你半颗星星怎么做

    原文链接:https://mp.weixin.qq.com/s/d_BcA6uX_8MDO89Ta0CpnA

    1

    概述



    我们在学习微信小程序或者做项目时,应该会遇到五星评分效果情况,那么这个五星评分,半颗星星怎么做功能我们应该怎么编写呢?

    今天我们说下微信小程序五星评分,半颗星星效果的实现,今天分享这样的小教程。希望对大家有所帮助



    快去拿个小板凳,坐等跟多更新



    2

    wxml



    <!--index.wxml-->
    <block wx:for="{{stars}}" wx:key="">
     <image class="star-image" style="left: {{item*150}}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:75rpx" data-key="{{item+1}}" bindtap="selectRight"></view>
     </image>
    </block>




    3

      js



    //index.js
    //获取应用实例
    var app = getApp()
    Page({
     data: {
       stars: [0, 1, 2, 3, 4],
       normalSrc: '../../images/normal.png',
       selectedSrc: '../../images/selected.png',
       halfSrc:'../../images/half.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;
       }
       console.log("得" + key + "分")
       this.setData({
         key: key
       })
     },
     //点击左边,整颗星
     selectRight: function (e) {
       var key = e.currentTarget.dataset.key
       console.log("得" + key + "分")
       this.setData({
         key: key
       })
     }
    })




    4   css



    /**index.wxss**/
    .star-image{
     position: absolute;
     top: 50rpx;
     width: 150rpx;
     height: 150rpx;
     src: "../../images/normal.png";
    }
    .item{
     position: absolute;
     top: 50rpx;
     width: 75rpx;
     height: 150rpx;
    }


    以上代码为效果为 图二


    文末福利:

    福利一:前端,Java,产品经理,微信小程序,Python等100G资源合集大放送:jianshu.com/p/e8197d4d9

    福利二:微信小程序入门与实战全套详细视频教程。


    【领取方法】

    关注 【编程微刊】微信公众号:

    回复【小程序demo】一键领取130个微信小程序源码demo资源。

    回复【领取资源】一键领取前端,Java,产品经理,微信小程序,Python等资源合集100G资源大放送。


  • 相关阅读:
    iOS必备知识点
    stringByReplacingOccurrencesOfString
    iPhone X 设计适配指南 & iOS 11 新特性
    block与property
    swift开发笔记04
    category重写系统方法的调用顺序是怎么样的?
    Error: Chunk.entry was removed. Use hasRuntime()错误解决
    李阳音标速成MP3文本
    JavaScript权威指南(第6版)(中文版)笔记
    Idea检入boss项目
  • 原文地址:https://www.cnblogs.com/ting6/p/9725522.html
Copyright © 2011-2022 走看看