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

This article mainly introduces uniapp how to achieve sliding scoring effect, the article introduces in great detail, has a certain reference value, interested friends must read it!

Uniapp development, slide score, click score

{{scoreContent}} export default {onLoad () {}, data () {return {fullStarUrl: 'full star picture', / / full star picture nullStarUrl: 'star picture', / / star picture score: 0, / / evaluation score scoreArray: [1, 2, 3, 4, 5], / divided into 1-5 rating levels scoreText: ['1 star' '2 stars','3 stars','4 stars','5 stars'], / / rating list scoreContent:'/ / text display rating}}, methods: {changeScore: function (e) {console.log (e) / / console touch event information var that = this Var num = 0 positional / temporary number, dynamically determine the score to be passed in var touchX = e.touches [0] .pageX; / / get the current touchpoint X coordinate var starMinX = 110 / the X coordinate of the leftmost first star, assuming that the distance from the page is 110, what is the distance from the left var starWidth = 15 / / the width of the star icon, assuming 15 (".star" is set in the wxss file) var starLen = 5. The distance between the stars is assumed to be 5 (".starLen" is set in the wxss file) var starMaxX = starWidth * 5 + starLen * 4+starMinX / / the rightmost X coordinate of the rightmost star, plus the width of 5 stars and 4 star spacing if (touchX > starMinX & & touchX < starMaxX) {/ / the initial position of click and touch is within the space of the star / / use the Math.ceil () method to obtain the ratio of the X coordinate of the current touch position to (star + star spacing). Make sure which star num = Math.ceil ((touchX-starMinX) / (starWidth + starLen)) is currently clicked If (num! = that.score) {/ / if the current score is not equal to the value just set, because the refresh rate of the touchmove method is very high, this can save some resources that.score = num, that.scoreContent=that.scoreText [num-1]}} else if (touchX < starMinX) {/ / if the click or touch position is to the left of the first star, restore the default value Otherwise, the first star will always exist with that.score = 0, that.scoreContent =''}},} .starLen {margin-right: 10rpx Display: inline-block;} .star {width:30rpx; height:30rpx;} .scoreContent {margin-left: 100rpx; display: inline-block; color: # fff;}

All the distances in the code are converted to 5rpx according to 10px/2 (if you use other units, please convert them yourself)

Var starMinX = 110The distance of the leftmost star from the left side of the screen

Var starWidth = 15, which is the width of the star

Var starLen = 5, which is the distance between two stars.

Example effect:

The above is all the content of the article "how to achieve sliding scoring effect in uniapp". Thank you for reading! Hope to share the content to help you, more related 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.