微信小程式評分功能(一)

2022-09-16 04:24:13 字數 1520 閱讀 4582

很多做過電商專案的朋友會經常用到評分的功能,我這裡正好寫了乙個例子,發出來分享一下:

我寫的是5分滿分制的,首先,準備3個,

,像這樣的,分別代表分數為0,0.5,1 時的狀態。

效果圖:(以3.5為例)

然後上**:

js:

function

pingfenxing(pingfen),

nums=;//這裡是返回排列的順序的陣列,這裡要注意在頁面使用的時候的路徑,不過使用網路無所謂

if((pingfen/0.5)%2==0)

else}}

else

else

if(i==(pingfen-0.5))

else}}

return num;

}module.exports =

wxml**:

for="}" wx:key="}" wx:for-item="pingfen">

}

使用這個功能的頁面的js**,這裡我是通過在後台獲取的評分值,然後把值用代表,將的排列路徑儲存起來,然後頁面渲染的時候呼叫這個變數就可以實現這個功能。

var pingxin=require("../../utils/pingxing.js");

page(

//我這裡是在頁面載入的時候先從後台獲取資料,把資料的值賦值給tuangou,然後遍歷將資料裡面的引數拿出來,然後再把相應的評分中的排列順序放到這條資料中的pingfenpic中儲存,然後在頁面中渲染即可

onload:function

(options),

method: 'get',

success: function

(res)

that.setdata();

console.log(that.data.tuangou);

},fail:

function

() ,

complete:

function

() });

}

});
如果你僅僅想先看一下例子,那麼使用這個功能的頁面的js這麼寫(上面的wxml中的item.pingxinpic變為pingxinpic、供引用的js不變):

var pingxin=require("../../utils/pingxing.js");

page(

//我這裡是在頁面載入的時候先從後台獲取資料,把資料的值賦值給tuangou,然後遍歷將資料裡面的引數拿出來,然後再把相應的評分中的排列順序放到這條資料中的pingfenpic中儲存,然後在頁面中渲染即可

onload:function

(options))

;  

}

});

若需要10分滿分制的,可以根據這個例子改

完結。。。

微信小程式星星評分元件

效果圖 先看 用乙個元件寫好星星元件,然後呼叫即可 rating.wxml starid?src2 src1 00 rating.js component rating index.js component 元件的初始資料 data starid 5,src1 images star.png src...

微信小程式功能介紹

援引官方對產品的定義 框架為開發者提供了一系列基礎元件,開發者可以通過組合這些基礎元件進行快速開發。基礎元件分為以下八大類 檢視容器 基礎內容 表單操作反饋 導航多 地圖畫布 將本地資源上傳到開發者伺服器 一種在單個tcp連線上進行全雙工通訊的協議,能夠輕鬆構建低延遲的客戶端。從本地相簿選擇或使用相...

微信小程式授權功能

思路 1.首先獲取授權,看看到底有沒有這個授權,如果有,那麼就不再進行再次請求,如果沒有,那麼再次請求或者其他的業務邏輯。2.檢視授權資訊介面 wx.getsetting object object 後面我們具體分析這個介面如何使用 3.通過來調取授權 業務 獲取使用者授權資訊 getshouqua...