zoukankan      html  css  js  c++  java
  • 小程序--星星评分系统

    1.首先wxml

    <view class='comment-stars'>
            <view class='comment-starTile'>评分</view>
            <view class='comment-starBox'>
              <block wx:for="{{starData.two_star}}">
                <view class='comment-starImg'>
                  <image src='{{starData.starActiveUrl}}' data-id='{{index+1}}' data-imgitem="starActive" bindtap='starComment'></image>
                </view>
              </block>
              <block wx:for="{{starData.one_star}}">
                <view class='comment-starImg'>
                  <image src='{{starData.starUrl}}' data-id='{{index+1}}' data-imgItem="starNormal" bindtap='starComment'></image>
                </view>
              </block>
            </view>
          </view>

    2..js

    data: {
        starData:{
          starUrl:'../../static/images/icons/star.png',
          starActiveUrl:'../../static/images/icons/star-active.png',
          one_star:5,
          two_star:0
        },
      },
      starComment(e){
        var imgItem = e.currentTarget.dataset.imgitem;
        var starId = e.currentTarget.dataset.id;
        var starData = this.data.starData;
        if(imgItem=="starActive"){
          starData.two_star = Number(starId);
          starData.one_star = 5 - starData.two_star;
          this.setData({
            starData:starData
          })
        }else{
          starData.two_star = Number(starId) + starData.two_star;
          starData.one_star = 5 - starData.two_star;
          this.setData({
            starData:starData
          })
          
        }
      },

    3.wxss

    .comment-stars .comment-starBox{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 20rpx 0 0;
    }
    .comment-stars .comment-starImg{
      width: 50rpx;
      height: 50rpx;
    }
  • 相关阅读:
    聚类算法学习-kmeans,kmedoids,GMM
    hdu
    高仿精仿微信应用ios源码下载
    UVA 116 Unidirectional TSP 经典dp题
    [置顶] 动态规划之切割钢条
    poj
    求解printf函数?
    实现多文件上传在iOS开发中
    开源DirectShow分析器和解码器: LAV Filter
    <Win32_20>纯c语言版的打飞机游戏出炉了^_^
  • 原文地址:https://www.cnblogs.com/huangmin1992/p/8609648.html
Copyright © 2011-2022 走看看