Shulou(Shulou.com)06/02 Report--

This article mainly shows you "how WeChat Mini Programs achieves star rating". The content is simple and clear. I hope it can help you solve your doubts. Next, let the editor lead you to study and learn the article "how WeChat Mini Programs achieves star rating".

The details are as follows

The first method:

WXML Code:

Star rating {{startext [0]}}

JS Code:

Page ({data: {flag: [0,0,0], startext: [',], starsBox: [1,2,3,4,5]}, changePic: function (e) {var index = e.currentTarget.dataset.index; console.log (index,'-'); var num = e.currentTarget.dataset.no Console.log (num); var a = 'flag [' + index +']'; console.log (a); var b = 'startext [' + index +']'; console.log (b); var that = this If (num = = 1) {that.setData ({[a]: 1, [b]: 'very unsatisfied'});} else if (num = = 2) {that.setData ({[a]: 2, [b]: 'dissatisfied'}) } else if (num = = 3) {that.setData ({[a]: 3, [b]: 'general'});} else if (num = = 4) {that.setData ({[a]: 4, [b]: 'satisfactory'}) } else if (num = = 5) {that.setData ({[a]: 5, [b]: 'very satisfied'});},})

WXSS Code:

.container {display: flex; flex-direction: row; padding: 0; flex-wrap: nowrap;} image {width: 50px; height: 50px;} second method:

WXML content:

Star rating {{starYesNum}} star

The first box with bright stars in the block tag

The second block tag contains a box with unlit stars.

Achieve stars by changing the number of bright stars and the number of unbright stars

JS Code:

Page ({data: {starYesNum:0, / / number of stars lit starNoNum:5, / / number of unlit stars}, selectStar:function (e) {console.log (e.target.id); console.log (e.currentTarget.dataset.in) / / determine whether the clicked star is bright or not, and set if (e.currentTarget.dataset.in = = 'selectStarNo') {this.setData ({starYesNum: Number (e.target.id) + Number (this.data.starYesNum)) StarNoNum:5-Number (e.target.id)-Number (this.data.starYesNum)} else {this.setData ({starYesNum:Number (e.target.id), starNoNum:Number (5-e.target.id)})},}) these are all the contents of the article "how to achieve Star rating by WeChat Mini Programs" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.