微信小程序之店铺评分组件及vue中用svg实现的评分显示组件
生活随笔
收集整理的這篇文章主要介紹了
微信小程序之店铺评分组件及vue中用svg实现的评分显示组件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在微信小程序中,有遇到要展示店鋪評分,或者是訂單完成后對商品進行評價,用到了星星展示,查了下,在微信中無法使用svg實現圖片,微信中只能將svg圖片轉成base64來顯示,所以是在vue中使用的svg來實現評分
1.效果圖
微信中的可以點擊及顯示,但是,顯示的話,在4.2分,4點多分的時候,顯示的是半顆星vue中用的是svg實現,所以用的是占比的形式,可以有一點點的星
2.微信實現店鋪評分顯示及商品評價星星展示
- 子組件index.wxml,可以動態的控制星星的大小
- 子組件index.wxss
- 子組件index.js
3.父組件中引用
- 父組件index.wxml
- 父組件index.json
- 父組件index.js
4.vue中使用svg實現評分
- 首先在vue使用的index.html的模板文件中添加一個rem轉換算法,因為我后面用的單位是rem
- 然后添加svg.vue文件,這個svg文件可以自己找圖片生成,并設置對應的id
- rating.vue文件引用svg.vue
?
?
?
?
?
總結
以上是生活随笔為你收集整理的微信小程序之店铺评分组件及vue中用svg实现的评分显示组件的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Codeforces - Captain
- 下一篇: Vue若依管理系统-实现管理员配置首页计