国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Table of Contents
Two implementation methods for pull-down refresh and pull-up loading of WeChat mini programs" >Two implementation methods for pull-down refresh and pull-up loading of WeChat mini programs
Home Backend Development PHP Tutorial Detailed explanation of WeChat applet implementation of pull-down loading and pull-up refresh

Detailed explanation of WeChat applet implementation of pull-down loading and pull-up refresh

Mar 14, 2018 pm 04:44 PM
refresh load Applets

This article talks about the implementation of pull-down loading and pull-up refresh by WeChat applet. If you don’t know about the implementation of pull-down loading and pull-up refresh by WeChat applet, or if you are interested in the implementation of pull-down loading and pull-up refresh by WeChat applet, then Let’s take a look at this article together. Okay, without further ado, let’s get to the point

Two implementation methods for pull-down refresh and pull-up loading of WeChat mini programs

Method 1: onPullDownRefresh and onReachBottom methods implement pull-down loading and pull-up refresh of the mini program

First, set the window attribute in the json file

##enablePullDownRefreshBooleanWhether to enable pull-down refresh, please see page related
Attribute ## Description
Event handlingfunction for details .
Set onPullDownRefresh and onReachBottom methods in js

Properties Type Description##onPullDownRefreshonReachBottom

Pull-down loading instructions:

After processing the data refresh, wx.stopPullDownRefresh can stop the pull-down refresh of the current page. 

onPullDownRefresh(){
　　console.log('--------下拉刷新-------')
　　wx.showNavigationBarLoading() //在標(biāo)題欄中顯示加載
 
　　wx.request({
          url: 'https://URL',
          data: {},
          method: 'GET',
         // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
          // header: {}, // 設(shè)置請(qǐng)求的 header
          success: function(res){
            // success
          },
          fail: function() {
            // fail
          },
          complete: function() {
            // complete
            wx.hideNavigationBarLoading() //完成停止加載
            wx.stopPullDownRefresh() //停止下拉刷新
          }
    })

Method 2:

Set bindscrolltoupper and bindscrolltolower in scroll-view to implement WeChat applet drop-down

function Page related event processing function - monitor user pull-down action
function Handling function for the bottom event triggered by page pull-up
##
index.wxml
<!--index.wxml-->
<view class="container" style="padding:0rpx">
  <!--垂直滾動(dòng)，這里必須設(shè)置高度-->
    <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" 
        class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad"  bindscroll="scroll">
        <view class="item" wx:for="{{list}}">
            <image class="img" src="{{item.pic_url}}"></image>
            <view class="text">
                <text class="title">{{item.name}}</text>
                <text class="description">{{item.short_description}}</text>
            </view>
        </view>
    </scroll-view>
    <view class="body-view">
        <loading hidden="{{hidden}}" bindchange="loadingChange">
            加載中...
        </loading>
    </view>
</view>
## Attribute Type Description
bindscrolltoupperEventHandleScroll to the top/left, the scrolltoupper event will be triggered
bindscrolltolowerEventHandle

##Scroll to bottom/right , will trigger the scrolltolower event

index.js

var url = "http://www.imooc.com/course/ajaxlist";
var page =0;
var page_size = 5;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;


// 請(qǐng)求數(shù)據(jù)
var loadMore = function(that){
    that.setData({
        hidden:false
    });
    wx.request({
        url:url,
        data:{
            page : page,
            page_size : page_size,
            sort : sort,
            is_easy : is_easy,
            lange_id : lange_id,
            pos_id : pos_id,
            unlearn : unlearn
        },
        success:function(res){
            //console.info(that.data.list);
            var list = that.data.list;
            for(var i = 0; i < res.data.list.length; i++){
                list.push(res.data.list[i]);
            }
            that.setData({
                list : list
            });
            page ++;
            that.setData({
                hidden:true
            });
        }
    });
}
Page({
  data:{
    hidden:true,
    list:[],
    scrollTop : 0,
    scrollHeight:0
  },
  onLoad:function(){
    //   這里要注意，微信的scroll-view必須要設(shè)置高度才能監(jiān)聽(tīng)滾動(dòng)事件，所以，需要在頁(yè)面的onLoad事件中給scroll-view的高度賦值
      var that = this;
      wx.getSystemInfo({
          success:function(res){
              that.setData({
                  scrollHeight:res.windowHeight
              });
          }
      });
       loadMore(that);
  },
  //頁(yè)面滑動(dòng)到底部
  bindDownLoad:function(){   
      var that = this;
      loadMore(that);
      console.log("lower");
  },
  scroll:function(event){
    //該方法綁定了頁(yè)面滾動(dòng)時(shí)的事件，我這里記錄了當(dāng)前的position.y的值,為了請(qǐng)求數(shù)據(jù)之后把頁(yè)面定位到這里來(lái)。
     this.setData({
         scrollTop : event.detail.scrollTop
     });
  },
  topLoad:function(event){
    //   該方法綁定了頁(yè)面滑動(dòng)到頂部的事件，然后做上拉刷新
      page = 0;
      this.setData({
          list : [],
          scrollTop : 0
      });
      loadMore(this);
      console.log("lower");
  }
})

index.wxss


/**index.wxss**/

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

/**/

scroll-view {
  width: 100%;
}

.item {
  width: 90%;
  height: 300rpx;
  margin: 20rpx auto;
  background: brown;
  overflow: hidden;
}

.item .img {
  width: 430rpx;
  margin-right: 20rpx;
  float: left;
}

.title {
  font-size: 30rpx;
  display: block;
  margin: 30rpx auto;
}

.description {
  font-size: 26rpx;
  line-height: 15rpx;
}


The above is all the content of this article. If you don’t know much about it, you can easily master both sides by yourself. !


Related recommendations:
WeChat applet implements finger zoom picture code sharing

The above is the detailed content of Detailed explanation of WeChat applet implementation of pull-down loading and pull-up refresh. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

6 Ways to Refresh Web Pages on iPhone 6 Ways to Refresh Web Pages on iPhone Feb 05, 2024 pm 02:00 PM

When you browse the web on your iPhone, the loaded content is temporarily stored as long as the browser app remains open. However, the website updates content regularly, so refreshing the page is an effective way to clear out old data and see the latest published content. This way, you always have the latest information and experiences. If you want to refresh the page on iPhone, the following post will explain you all the methods. How to Refresh Web Pages on Safari [4 Methods] There are several methods to refresh the pages you are viewing on the Safari App on iPhone. Method 1: Use the Refresh Button The easiest way to refresh a page you have open on Safari is to use the Refresh option on your browser's tab bar. If Safa

F5 refresh key not working in Windows 11 F5 refresh key not working in Windows 11 Mar 14, 2024 pm 01:01 PM

Is the F5 key not working properly on your Windows 11/10 PC? The F5 key is typically used to refresh the desktop or explorer or reload a web page. However, some of our readers have reported that the F5 key is refreshing their computers and not working properly. How to enable F5 refresh in Windows 11? To refresh your Windows PC, just press the F5 key. On some laptops or desktops, you may need to press the Fn+F5 key combination to complete the refresh operation. Why doesn't F5 refresh work? If pressing the F5 key fails to refresh your computer or you are experiencing issues on Windows 11/10, it may be due to the function keys being locked. Other potential causes include the keyboard or F5 key

Error loading plugin in Illustrator [Fixed] Error loading plugin in Illustrator [Fixed] Feb 19, 2024 pm 12:00 PM

When launching Adobe Illustrator, does a message about an error loading the plug-in pop up? Some Illustrator users have encountered this error when opening the application. The message is followed by a list of problematic plugins. This error message indicates that there is a problem with the installed plug-in, but it may also be caused by other reasons such as a damaged Visual C++ DLL file or a damaged preference file. If you encounter this error, we will guide you in this article to fix the problem, so continue reading below. Error loading plug-in in Illustrator If you receive an "Error loading plug-in" error message when trying to launch Adobe Illustrator, you can use the following: As an administrator

Stremio subtitles not working; error loading subtitles Stremio subtitles not working; error loading subtitles Feb 24, 2024 am 09:50 AM

Subtitles not working on Stremio on your Windows PC? Some Stremio users reported that subtitles were not displayed in the videos. Many users reported encountering an error message that said "Error loading subtitles." Here is the full error message that appears with this error: An error occurred while loading subtitles Failed to load subtitles: This could be a problem with the plugin you are using or your network. As the error message says, it could be your internet connection that is causing the error. So please check your network connection and make sure your internet is working properly. Apart from this, there could be other reasons behind this error, including conflicting subtitles add-on, unsupported subtitles for specific video content, and outdated Stremio app. like

Develop WeChat applet using Python Develop WeChat applet using Python Jun 17, 2023 pm 06:34 PM

With the popularity of mobile Internet technology and smartphones, WeChat has become an indispensable application in people's lives. WeChat mini programs allow people to directly use mini programs to solve some simple needs without downloading and installing applications. This article will introduce how to use Python to develop WeChat applet. 1. Preparation Before using Python to develop WeChat applet, you need to install the relevant Python library. It is recommended to use the two libraries wxpy and itchat here. wxpy is a WeChat machine

Implement card flipping effects in WeChat mini programs Implement card flipping effects in WeChat mini programs Nov 21, 2023 am 10:55 AM

Implementing card flipping effects in WeChat mini programs In WeChat mini programs, implementing card flipping effects is a common animation effect that can improve user experience and the attractiveness of interface interactions. The following will introduce in detail how to implement the special effect of card flipping in the WeChat applet and provide relevant code examples. First, you need to define two card elements in the page layout file of the mini program, one for displaying the front content and one for displaying the back content. The specific sample code is as follows: &lt;!--index.wxml--&gt;&l

How to quickly refresh a web page? How to quickly refresh a web page? Feb 18, 2024 pm 01:14 PM

Page refresh is very common in our daily network use. When we visit a web page, we sometimes encounter some problems, such as the web page not loading or displaying abnormally, etc. At this time, we usually choose to refresh the page to solve the problem, so how to refresh the page quickly? Let’s discuss the shortcut keys for page refresh. The page refresh shortcut key is a method to quickly refresh the current web page through keyboard operations. In different operating systems and browsers, the shortcut keys for page refresh may be different. Below we use the common W

Alipay launched the 'Chinese Character Picking-Rare Characters' mini program to collect and supplement the rare character library Alipay launched the 'Chinese Character Picking-Rare Characters' mini program to collect and supplement the rare character library Oct 31, 2023 pm 09:25 PM

According to news from this site on October 31, on May 27 this year, Ant Group announced the launch of the "Chinese Character Picking Project", and recently ushered in new progress: Alipay launched the "Chinese Character Picking-Uncommon Characters" mini program to collect collections from the society Rare characters supplement the rare character library and provide different input experiences for rare characters to help improve the rare character input method in Alipay. Currently, users can enter the "Uncommon Characters" applet by searching for keywords such as "Chinese character pick-up" and "rare characters". In the mini program, users can submit pictures of rare characters that have not been recognized and entered by the system. After confirmation, Alipay engineers will make additional entries into the font library. This website noticed that users can also experience the latest word-splitting input method in the mini program. This input method is designed for rare words with unclear pronunciation. User dismantling

See all articles