微信小程式星星評分元件

2021-08-31 16:31:48 字數 1102 閱讀 6018

效果圖：

先看**，用乙個元件寫好星星元件，然後呼叫即可

rating.wxml

starid?src2:src1}}">


}.00
rating.js

// component/rating/index.js


component(,


/*** 元件的初始資料


*/data: , , , , ],


starid: 5,


src1: '/images/star.png',


src2: '/images/graystar.png',


},/**


* 元件的方法列表


*/methods: )


}}})
rating.wxss

.itembox 


.scorepin


.star
然後引用即可使用

這裡通過迴圈判斷顯示有色和無色的星星，這是關鍵點

starid?src2:src1}}">
2.vue svg星星評分元件

效果圖：

1.先用svg畫好星星

svg.vue

這裡用的是rem的單位，這裡提供乙個簡單的px轉rem的簡單方法；在index.html裡面引入

rating.vue

引入svg這個元件

//根據長度來顯示有色星星svg的長度
原理：有色星星和無色星星放在同乙個位置，控制有色星星svg的寬度來顯示無色星星，這樣就能做到實現顯示4.2評分的星星

vue 星星評分元件

評分外掛程式在購物的應用中經常可以看得到，但是用著別人的總是沒有自己寫的順手，正好趁著這段時間做乙個移動端應用的時候寫了乙個基於vue的評分元件，功能沒有寫全 主體結構 scorelayer v show isshowscore click hidescorelayer event center b...

微信小程式元件

class屬性 可以設定樣式,如果與動態資料繫結結合,元件的class具有動態變化的能力 style 通過style設定元件的內聯樣式,style屬性值中可以設定css的各種屬性 hidden 預設為false,不隱藏 data 屬性 可以用來為元件設定任意的自定義的屬性值,當元件繫結的事件觸發時,...

微信小程式 元件

官方文件見 我們的封裝 var basecomponentoption require utils basecomponentoption var option basecomponentoption.init 最小值限制 min 最大值 max 當前值 value 傳參物件,和 官方文件一致,只是...