小程序模板網(wǎng)

微信小程序五星級(jí)評(píng)分效果

發(fā)布時(shí)間:2018-04-23 11:21 所屬欄目:小程序開(kāi)發(fā)教程

五星級(jí)評(píng)分效果:

 

				
  1. <view>
  2. <view class="zan-font-16 my-ib" bindtap="myStarChoose">
  3. <block wx:for="{{starMap}}">
  4. <text wx:if="{{star>=index+1}}" style="padding-right: .5em" class="zan-c-red" data-star="{{index+1}}">★</text>
  5. <text wx:if="{{star<index+1}}" style="padding-right: .5em" class="zan-c-gray-dark" data-star="{{index+1}}">☆</text>
  6. </block>
  7. </view>
  8. <!--★-->
  9. <text class="zan-c-gray-dark">{{starMap[star-1]}}</text>
  10. </view>

這里的zan-font-16,zan-c-red,zan-c-gray-dark是ZanUI-WeApp的樣式。  這里的my-ib只是將設(shè)置display為inline-block。

 

				
  1. Page({
  2. data: {
  3. star: 0,
  4. starMap: [
  5. '非常差',
  6. '差',
  7. '一般',
  8. '好',
  9. '非常好',
  10. ],
  11. },
  12. myStarChoose(e) {
  13. let star = parseInt(e.target.dataset.star) || 0;
  14. this.setData({
  15. star: star,
  16. });
  17. }
  18. });

效果如圖:



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/23910.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線(xiàn)咨詢(xún)