Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of WeChat Mini Programs how to achieve left and right sliding, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe everyone will gain something after reading this WeChat Mini Programs article on how to achieve left and right sliding. Let's take a look.

Overall effect of the project

Analysis of some function points of the project

The home page picture slides left and right corresponding to the button change.

First of all, let's talk about the biggest headache for me, that is, the left and right sliding events of the main page and the corresponding buttons will change accordingly, that is, if I slide to the left, the gray button under the picture will have the corresponding animation effect, and the right slide will correspond to the red button under the picture. For a girl who has just entered the Mini Program pit, I don't know how long it will take to get around the logic pit without the guidance of a great god. Only with the guidance of a high person can I realize this function perfectly.

Here we write three large boxes with pictures and text messages, then put them into swiper-item, and use swiper components to slide the whole box left and right.

K ♂ 21 Taurus Culture / Education

There are no buttons under the box. I put two pictures under the box.

First write them an animation effect that is triggered when you slide.

.active {animation: active 1s ease;// defines an animation called active {/ / supplement the active action script 0 {transform: scale (0.8);} 50% {transform: scale (1.2);} 100% {transform: scale (1.0);}}

Define three variables in the data of page, and bind the left,right variable to the corresponding picture

Data: {left: false, right: false, activeIndex: 0}

Determine the left and right sliding events in the swiper binding event

Changeswiper: function (e) {var index = e.detail.currentterraced / index if of the current page (index > this.data.activeIndex) {/ / left slide event judges this.setData ({left: true// if left slide, true value triggers picture animation})} else if (index)

{/ / with each slide, the data changes this.setData ({activeIndex: index, left:false, right:false})}, 1000);}

Upload pictures locally

This, ah, just look up the Mini Program development documentation. First bind a data variable to the src of the place where you want to upload the picture.

Put the default address of the picture, which is the added picture before uploading the picture.

Data: {imgUrl:'.. /.. / images/addImg.png'}

Replace the uploaded image address by binding the tap event

UploadImg: function (e) {var that = this Wx.chooseImage ({count: 1, / / number of uploaded images sizeType: ['original',' compressed'], / / you can specify the original image or compressed image. By default, both have sourceType: ['album',' camera'], / / you can specify whether the source is a photo album or a camera, and by default both have success: function (res) {/ / return the local file path list of the selected photo TempFilePath can be used as the src attribute of the img tag to display pictures var tempFilePaths = res.tempFilePaths That.setData ({imgUrl: tempFilePaths}) wx.showToast ({/ / shows uploaded successfully title: 'uploaded successfully', icon: 'success', duration: 2000})})

The successful pairing list is based on obtaining background data through easy-mock.

Block wx:for renders a building block containing multiple nodes

{{item.nickname}} {{item.message}}

Get background data

Wx.request ({url: 'https://www.easy-mock.com/mock/5a23dbf382614c0dc1bebf04/getFriendsList/getFriendsList', success: (res) = > {/ / console.log (response); this.setData ({friendsList: res.data.data.friendsList})}) this is the end of the article on "how to slide left and right by WeChat Mini Programs". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to slide around WeChat Mini Programs". If you still want to learn more knowledge, you are 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.