How to achieve star rating by WeChat Mini Programs
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!
