How to realize the Carousel Map in WeChat Mini Programs
This article mainly introduces "how to realize the rotation map in WeChat Mini Programs". In the daily operation, I believe that many people have doubts about how to realize the round broadcast map in WeChat Mini Programs. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to realize the rotation map in WeChat Mini Programs"! Next, please follow the editor to study!
Business requirements:
5 pictures are played in turn, you can slide left and right, and click the indication point to switch the picture.
Key notes:
Due to WeChat Mini Programs, the compiled size of the whole project cannot exceed 1m.
The size of a picture in the round-casting function is already 100k.
Then we can put the picture on the server and send a request to get it.
Index.wxml:
The components provided by Mini Program are used here.
Autoplay: auto playback
Interval: automatic switching time
Duration: length of time to slide animation
Current: the page you are currently on
The change event is triggered when the bindchange:current changes
Since the style of the indication point provided by the component is relatively simple, customize the style of the indication point.
{{index+1}}
Index.wxss:
.swiper-container {position: relative;} .swiper-container .swiper {height: 300rpx;} .swiper-container .swiper .img {width: 100%; height: 100%;} .swiper-container .dots {position: absolute; right: 40rpx; bottom: 20rpx; display: flex; justify-content: center;} .swiper-container .dots .dot {margin: 010rpx; width: 28rpx; height: 28rpx; background: # fff; border-radius: 50% Transition: all .6s; font: 300 18rpx/28rpx "microsoft yahei"; text-align: center;} .swiper-container .dots .dot.active {background: # f80; color:#fff;}
Index.js:
/ / Import js var util = require ('.. /.. / utils/util.js') Page ({data: {slider: [], swiperCurrent: 0}, onLoad: function () {var that = this; / / Network access, get the picture util.getRecommend (function (data) {that.setData ({slider: data.data.slider})} of the carousel graph) }, / / switching event swiperChange: function (e) {/ / as long as the current index after switching is passed to the current attribute of the component, this.setData ({swiperCurrent: e.detail.current})}, / / Click the instruction point to switch chuangEvent: function (e) {this.setData ({swiperCurrent: e.currentTarget.id})})
Utils.js:
/ / Network access function getRecommend (callback) {wx.request ({url: 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg', data: {g_tk: 5381, uin: 0, format:' json', inCharset: 'utf-8', outCharset:' utf-8', notice: 0, platform:'h6), needNewCode: 1 _: Date.now ()}, method: 'GET', header: {' content-Type': 'application/json'}, success: function (res) {if (res.statusCode = = 200) {callback (res.data) })} module.exports = {getRecommend: getRecommend}
Run:
At this point, the study on "how to realize the rotation map in WeChat Mini Programs" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
