国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

微信小程序之店鋪評(píng)分組件及vue中用svg實(shí)現(xiàn)的評(píng)分顯示組件

BetaRabbit / 3332人閱讀

摘要：在微信小程序中，有遇到要展示店鋪評(píng)分，或者是訂單完成后對(duì)商品進(jìn)行評(píng)價(jià)，用到了星星展示，查了下，在微信中無(wú)法使用實(shí)現(xiàn)圖片，微信中只能將圖片轉(zhuǎn)成來(lái)顯示，所以是在中使用的來(lái)實(shí)現(xiàn)評(píng)分效果圖微信中的可以點(diǎn)擊及顯示，但是，顯示的話(huà)，在分，點(diǎn)多分的時(shí)候，

在微信小程序中，有遇到要展示店鋪評(píng)分，或者是訂單完成后對(duì)商品進(jìn)行評(píng)價(jià)，用到了星星展示，查了下，在微信中無(wú)法使用svg實(shí)現(xiàn)圖片，微信中只能將svg圖片轉(zhuǎn)成base64來(lái)顯示，所以是在vue中使用的svg來(lái)實(shí)現(xiàn)評(píng)分
1.效果圖 
微信中的可以點(diǎn)擊及顯示，但是，顯示的話(huà)，在4.2分，4點(diǎn)多分的時(shí)候，顯示的是半顆星
vue中用的是svg實(shí)現(xiàn)，所以用的是占比的形式,可以有一點(diǎn)點(diǎn)的星


星星圖片
2.微信實(shí)現(xiàn)店鋪評(píng)分顯示及商品評(píng)價(jià)星星展示

子組件index.wxml，可以動(dòng)態(tài)的控制星星的大小



  
    
      
    
  
  
    暫無(wú)評(píng)分
    差評(píng)
    中評(píng)
    好評(píng)

子組件index.wxss

.starsBox{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.stars{
  width: 150rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.stars image{
  width: 30rpx;
  height: 30rpx;
}
.text{
  color: #ccc;
  margin-left: 20rpx;
}

子組件index.js

Component({
  properties: {
    /* 顯示有色星星的個(gè)數(shù) */
    value: {
      type: Number,
      value: 0,
      /* 監(jiān)聽(tīng)value值的變化 */
      observer: function (newVal, oldVal, changedPath) {
        this.init()
      }
    },
    /* 設(shè)置星星大小 */
    size: {
      type: Number,
      value: 30
    },
    /* 是否可點(diǎn)擊，type為null表示值可以是任意類(lèi)型 */
    isClick: {
      type: null,
      value: false
    }
  },
  attached() {
    /* 組件生命周期函數(shù)，在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹(shù)時(shí)執(zhí)行 */
    this.init();
  },
  data: {
    stars: [0, 0, 0, 0, 0]
  },
  methods: {
    init() {
      let star = this.properties.value;
      let stars = [0, 0, 0, 0, 0];
      /* 圖片名稱(chēng)，通過(guò)設(shè)置圖片名稱(chēng)來(lái)動(dòng)態(tài)的改變圖片顯示 */
      for (let i = 0; i < Math.floor(star); i++) {
        stars[i] = "star";
      }
      if (star > Math.floor(star)) {
        stars[Math.floor(star)] = "halfStar";
      }
      for (let i = 0; i < stars.length; i++) {
        if (stars[i] == 0) {
          stars[i] = "grayStar";
        }
      }
      this.setData({
        stars
      })
    },
    /* 可點(diǎn)擊時(shí)，用于計(jì)算分?jǐn)?shù) */
    computeScore(e) {
      let index = e.currentTarget.dataset.index;
      let isClick = this.data.isClick;
      if (isClick) {
        let score = index + 1;
        this.triggerEvent("compute", {
          score
        });
      }
    }
  }
})
3.父組件中引用

父組件index.wxml

父組件index.json

{
    "usingComponents": {
        "score": "/component/score/index"
    }
}

父組件index.js

data: {
    shopGrade: 0,
    shopGrade1: 4.6,
},
/* 評(píng)分處理事件 */
computeGrade(e) {
    let score = e.detail.score;
    this.setData({
        shopGrade: score
    })
},
4.vue中使用svg實(shí)現(xiàn)評(píng)分

首先在vue使用的index.html的模板文件中添加一個(gè)rem轉(zhuǎn)換算法，因?yàn)槲液竺嬗玫膯挝皇莚em

/* 在頭部添加 */

然后添加svg.vue文件，這個(gè)svg文件可以自己找圖片生成，并設(shè)置對(duì)應(yīng)的id

rating.vue文件引用svg.vue

都有用到組件，可以查看下方的推薦文章中的購(gòu)物車(chē)中的父子組件傳值

正在努力學(xué)習(xí)中，若對(duì)你的學(xué)習(xí)有幫助，留下你的印記唄（點(diǎn)個(gè)贊咯^_^）

往期好文推薦：

判斷iOS和Android及PC端

實(shí)現(xiàn)單行文字及多行文字的省略號(hào)

微信小程序之購(gòu)物車(chē)和父子組件傳值及calc的注意事項(xiàng)

純css實(shí)現(xiàn)瀑布流（multi-column多列及flex布局）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/108582.html

相關(guān)文章

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門(mén)視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開(kāi)發(fā)和面試問(wèn)題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開(kāi)發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...

    pumpkin9 評(píng)論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門(mén)視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開(kāi)發(fā)和面試問(wèn)題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開(kāi)發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...

    Carson 評(píng)論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門(mén)視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開(kāi)發(fā)和面試問(wèn)題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開(kāi)發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...

    muzhuyu 評(píng)論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門(mén)視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開(kāi)發(fā)和面試問(wèn)題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開(kāi)發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...

    li21 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<