美文网首页
微信小程序实现星级评分效果

微信小程序实现星级评分效果

作者: 三人行慕课 | 来源:发表于2019-09-28 18:23 被阅读0次

    微信小程序像下面图的评分功能是怎么做的?逻辑是什么样的?

    逻辑整理:

    1、不管如何都是显示5颗星星,那就让星星(图片)循环5次

    2、图片分为3张(全黄色星星、半黄半灰星星、全灰色星星)

    3、根据目标分值判断什么情况下显示什么星星

    (比如分值是:35)

    4、判断显示什么星星

    全黄色星星:35/10 >= index=1

    半黄半灰:35/10>=index && 35%10 !=0

    全灰色星星:直接else就好了

    代码实现:

    <view

        class='stars'

        wx:for='{{[1,2,3,4,5]}}'

        wx:key="{{index}}"

        wx:for-item='i'

    >

        <image

          src='/img/star_fill_whole.png'

          wx:if="{{item.rating.stars/10 >= index+1 }}"

        ></image>

        <image

          src='/img/star_fill_half.png'

          wx:elif="{{item.rating.stars/10 >= index && item.rating.stars%10 !=0 }}"

        ></image>

        <image

          src='/img/star_fill_none.png'

          wx:else

        ></image>

    </view>

    微信小程序视频课程:https://www.3mooc.com/front/couinfo/205

    相关文章

      网友评论

          本文标题:微信小程序实现星级评分效果

          本文链接:https://www.haomeiwen.com/subject/djwhyctx.html