zoukankan      html  css  js  c++  java
  • 小程序制作五星点评(默认五星)

    https://blog.csdn.net/xiaoshan0711/article/details/54571823

    在小程序的开发过程中,我们会遇到一种情况,就是在制作五星点评的时候,默认五颗星星都是要亮的。这里我们就要分享一下自己做默认五星的心得。

    在这里我们先看一下效果图:

    我们在订单页面的时候,当点击“晒单”按钮的时候我们跳转到评价的页面。

    <!--星星评价--> <view class="comment1-description" style="display:flex;flex-direction:row;"> <view class="comment1-description1">描述相符</view> <view class="star-pos" style="display:flex;flex-direction:row;"> <view class="starsM {{flag2>=1? '': 'hideStar'}}" bindtap="changeColor11"></view> <view class="starsM {{flag2>=2? '': 'hideStar'}}" bindtap="changeColor12"></view> <view class="starsM {{flag2>=3? '': 'hideStar'}}" bindtap="changeColor13"></view> <view class="starsM {{flag2>=4? '': 'hideStar'}}" bindtap="changeColor14"></view> <view class="starsM {{flag2>=5? '': 'hideStar'}}" bindtap="changeColor15"></view> </view> </view>

    .comment1-description{
        margin-top: 35rpx;
    }
    .comment1-description1{
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        color: #333333;
        margin-left: 30rpx;
    }
    .star-pos {
        position: absolute;
        right: 0px;
        margin-right: 40rpx;
    }
    .comment1-description .star-pos .hideStar{
        z-index: 2;
        background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star(灰)@1.5x.png");
         83rpx;
        height: 43rpx;
        background-size: 43rpx 43rpx;
        background-position: center center;
        background-repeat: no-repeat;
    }
    
    .starsM{
        z-index: 1;
         83rpx;
        height: 43rpx;
        background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star@1.5x.png");
        background-size: 43rpx 43rpx;
        background-position: center center;
        background-repeat: no-repeat;
    }
  • 相关阅读:
    Xshell学习第九课:数组与字符串
    Xshell学习第八课:函数
    Xshell学习第七课:sed语句
    Xshell学习第六课:read与for语句循环
    Xshell学习第五课:if判断语句
    Xshell学习第四课:grep与正则表达式
    Xshell学习第三课:编程原理
    Xshell学习第二课:重定向和管道符
    iOS中坐标转换
    iOS工作笔记(十五)
  • 原文地址:https://www.cnblogs.com/wcLT/p/9115310.html
Copyright © 2011-2022 走看看