用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    慵懒
    2017-1-6 10:46
  • 签到天数: 2 天

    [LV.1]初来乍到

    173

    主题

    181

    帖子

    981

    金钱

    咫尺尊享

    Rank: 5Rank: 5

    积分
    0
    2017-2-15 15:06:44 柿霖不是林 咫尺尊享 楼主 22254
    一位同学说要写五星评分.要有半颗星的评分.
    于是我做了个玩具.有空了做模块化,这代码看不下去了.



    WXML
    [HTML] 纯文本查看 复制代码
    <!--index.wxml-->
    <block wx:for="{{stars}}">
      <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>





    WXSS
    [CSS] 纯文本查看 复制代码
    .star-image {
      position: absolute;
      top: 50rpx;
      width: 150rpx;
      height: 150rpx;
      src: "../../images/normal.png";
    }
     
    .item {
      position: absolute;
      top: 50rpx;
      width: 75rpx;
      height: 150rpx;
    }



    JS


    [JavaScript] 纯文本查看 复制代码
    //index.js
    //CSDN微信小程序开发专栏:[url=http://blog.csdn.net/column/details/13721.html]http://blog.csdn.net/column/details/13721.html[/url]
    //获取应用实例
    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
        })
      }
    })





    游客,如果您要查看本帖隐藏内容请回复

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    感谢分享
    使用道具 举报 回复
    专注于与个人游戏开发者合作,有产品的朋友联系微,信,号j i m 2 0 1 8 0 6 8 8,详聊
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略