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

This article "WeChat Mini Programs how to use picture rotation and scrolling view", the sample code in the article is very detailed and has a certain reference value. Friends who are interested must refer to it. For "how WeChat Mini Programs uses picture rotation and scrolling view", the editor sorted out the following knowledge points, please follow the pace of the editor to understand step by step, and then let's get into the topic.

Scroll-view scrollable view area

Swiper Photo rotation Container

Three ways to link to Navigator pages

Scroll-view

The attribute description is as follows:

When using vertical scrolling, you need to give a fixed height and set the height through WXSS. Sample code:

Effect picture:

Note:

Tip: do not use textarea, map, canvas, video components in scroll-view

Tip: scroll-into-view takes precedence over scroll-top

Tip: page rebound is blocked when scrolling scroll-view, so scrolling in scroll-view cannot trigger onPullDownRefresh

Tip: to use a drop-down refresh, use page scrolling instead of scroll-view, so you can also go back to the top of the page by clicking on the top status bar

2. Swiper attribute description:

Note: only components can be placed, otherwise it will result in undefined behavior.

Swiper-item

Can only be placed in a component, and the width and height are automatically set to 100%.

The code is as follows:

JS Code:

/ / pages/test1/test1.jsPage ({data: {wxTitle: "Wechat Program", alertInfo: "Login succeeded", isShow:false,imgUrls: ["https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489225534462&di=009148115f436101d6377305b2f660ef&imgtype=0&src=https://www.2cto.com/uploadfile/2018/0519/20180519105145728.jpg",'],indicatorDots: true,autoplay: true,interval: 5000 charge programs: 1000}" ChangeIndicatorDots: function (e) {this.setData ({indicatorDots:! this.data.indicatorDots})}, changeAutoplay: function (e) {this.setData ({autoplay:! this.data.autoplay})}, intervalChange: function (e) {this.setData ({interval: e.detail.value})}, durationChange: function (e) {this.setData ({duration: e.detail.value})})

The effect is as follows:

Navgator page link

Attribute description:

A. OpenMurtype = "navigate" opens a new interface

B. OpenMurtype = "redirect" opens a new interface in this interface

C. OpenMurtype = "switchTab" controls the switching between tab pages

Note:

All interfaces that need to jump links must register an in app.json. B can only connect pages that are not registered in tabBar, and cannot open url= ".. / index/index", because the pages/index/index interface is tab page c, which can only open tab pages registered in app.json, that is, the interface registered by tabBar.

What does Mini Program mean? Mini Program is an application that can be used without download and installation. It can be used immediately by scanning a QR code or searching it. It is easy to operate and easy to spread. It can achieve seven major functions, such as message notification, offline code scanning, official account association, and so on. It is based on Wechat, similar to APP. You can use it whenever you want. After using it, you will leave without taking up memory.

The above is all the contents of the article "how WeChat Mini Programs uses picture rotation and scrolling view". 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.