亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Home WeChat Applet Mini Program Development Detailed explanation of an example of sliding the screen to load data on the WeChat applet page

Detailed explanation of an example of sliding the screen to load data on the WeChat applet page

May 29, 2018 pm 03:00 PM
load Applets Screen

This article mainly introduces in detail the effect of sliding screen loading data on the WeChat applet page, which has certain reference value. Interested friends can refer to it

The sliding screen loading data is any small program There are functions that are commonly used in the program. In this article, I will organize this function for everyone. I hope it will be interesting to everyone. Let’s take a look at the renderings first:

Create directory

First we create an information directory in the project. The following is what I created myself Directory, you can create it according to your own needs. As shown in the picture:

Create lists.js file

The following is the lists.js code

var app = getApp()
Page({
 data: {
  newsList: [],
  lastid: 0,
  toastHidden: true,
  confirmHidden: true,
  isfrist: 1,
  loadHidden: true,
  moreHidden: 'none',
  msg: '沒有更多文章了'
 },
 loadData: function (lastid) {
  //顯示出加載中的提示
  this.setData({ loadHidden: false })
  var limit = 10
  var that = this
  wx.request({
   url: 'http://127.0.0.1:9090/hpm_bill_web/news/getnewslist', //數(shù)據(jù)接口
   data: { lastid: lastid, limit: limit },
   header: {
    'Content-Type': 'application/json'
   },
   success: function (res) {
    if (!res.data) {
     that.setData({ toastHidden: false })
     that.setData({ moreHidden: 'none' })
     return false
    }
    var len = res.data.length
    var oldLastid = lastid
    if(len != 0) {
     that.setData({ lastid: res.data[len - 1].id })
    } else {
     that.setData({ toastHidden: false})
    }
    var dataArr = that.data.newsList
    var newData = dataArr.concat(res.data);
     if (oldLastid == 0) {
      wx.setStorageSync('CmsList', newData)
     }
    that.setData({ newsList: newData })
    that.setData({ moreHidden: '' })
   },
   fail: function (res) {
    if (lastid == 0) {
     var newData = wx.getStorageSync('CmsList')
     if(newData) {
      that.setData({ newsList: newData })
      that.setData({ moreHidden: '' })
      var len = newData.length
      if (len != 0) {
       that.setData({ lastid: newData[len - 1].id })
      } else {
       that.setData({ toastHidden: false })
      }
      console.log('data from cache');
     }
     } else {
      that.setData({ toastHidden: false, moreHidden: 'none', msg: '當(dāng)前網(wǎng)格異常,請(qǐng)稍后再試' })
     }
   },
   complete: function () {
    //顯示出加載中的提示
    that.setData({ loadHidden: true })
   }
  })
 },
 loadMore: function (event) {
  var id = event.currentTarget.dataset.lastid
  var isfrist = event.currentTarget.dataset.isfrist
  var that = this
  wx.getNetworkType({
   success: function (res) {
    var networkType = res.networkType // 返回網(wǎng)絡(luò)類型2g,3g,4g,wifi
    if (networkType != 'wifi' && isfrist == '1') {
     that.setData({ confirmHidden: false })
    }
   }
  })
  this.setData({ isfrist: 0 })
  this.loadData(id);
 },
 onLoad: function () {
  var that = this
  this.loadData(0);
 },
 toastChange: function () {
  this.setData({ toastHidden: true })
 },
 modalChange: function () {
  this.setData({ confirmHidden: true })
 }
})

Create page file (lists.wxml)

<view class="warp">
 <!-- 文章列表模板 begin -->
 <template name="items">
  <navigator url="../../pages/detail/detail?id={{id}}" hover-class="navigator-hover">
   <view class="imgs">
    <image src="{{image}}" class="in-img" background-size="cover" model="scaleToFill"></image>
   </view>
   <view class="infos">
    <view class="title">{{name}}</view>
    <view class="dates">{{createtime}}</view>
   </view>
  </navigator>
 </template>
 <!-- 文章列表模板 end -->
 <!-- 循環(huán)輸出列表 begin -->
 <view wx:for="{{newsList}}" class="list">
  <template is="items" data="{{...item}}" />
 </view>
 <!-- 循環(huán)輸出列表 end -->
<loading hidden="{{loadHidden}}" bindchange="loadChange">
  數(shù)據(jù)加載中...
</loading>
 <view bindtap="loadMore" data-lastid="{{lastid}}" data-isfrist="{{isfrist}}" class="loadMore" style="display:{{moreHidden}}">加載更多</view>
 <toast hidden="{{toastHidden}}" bindchange="toastChange" duration="3000">{{msg}}</toast>
 <modal title="溫馨提示" no-cancel confirm-text="明確" cancel-text="關(guān)閉" hidden="{{confirmHidden}}" bindconfirm="modalChange" bindcancel="modalChange">你當(dāng)前不在在WIFI網(wǎng)格下下,會(huì)產(chǎn)生流量費(fèi)用</modal>
</view>

Create page style (lists.wxss)

.warp {height:100%;display:flex;flex-direction: column;padding:20rpx;}
navigator {overflow: hidden;}
.list {margin-bottom:20rpx;height:200rpx;position:relative;}
.imgs{float:left;}
.imgs image {display:block;width:200rpx;height:200rpx;}
.infos {float:left;width:480rpx;height:200rpx;padding:20rpx 0 0 20rpx}
.title {font-size:20px; font-family: Microsoft Yahei}
.dates {font-size:16px;color: #aaa; position: absolute;bottom:0;}
.loadMore {text-align: center; margin:30px;color:#aaa;font-size:16px;}

Through the above code, you can realize the function of sliding and displaying data on the screen.

The above is the detailed content of Detailed explanation of an example of sliding the screen to load data on the WeChat applet page. 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)

iPhone screenshots not working: How to fix it iPhone screenshots not working: How to fix it May 03, 2024 pm 09:16 PM

Screenshot feature not working on your iPhone? Taking a screenshot is very easy as you just need to hold down the Volume Up button and the Power button at the same time to grab your phone screen. However, there are other ways to capture frames on the device. Fix 1 – Using Assistive Touch Take a screenshot using the Assistive Touch feature. Step 1 – Go to your phone settings. Step 2 – Next, tap to open Accessibility settings. Step 3 – Open Touch settings. Step 4 – Next, open the Assistive Touch settings. Step 5 – Turn on Assistive Touch on your phone. Step 6 – Open “Customize Top Menu” to access it. Step 7 – Now you just need to link any of these functions to your screen capture. So click on the first

Does miniled screen hurt eyes? Does miniled screen hurt eyes? Feb 07, 2024 pm 03:48 PM

What many users are most concerned about is whether the miniLED screen will hurt the eyes. In fact, although the brightness of this screen can reach extremely high, it will not hurt the eyes and can still be used normally. Does the miniled screen hurt your eyes? Answer: It does not hurt your eyes. Although the brightness of the miniLED screen will be higher, it will not continue to maintain this brightness during daily use. It will only be displayed when the brightness needs to be increased, so it will not always maintain high brightness and hurt the eyes. This peak brightness is also for better Good presentation and expression. MiniLED screen introduction 1. MiniLED backlight display technology uses backlight, so the biggest difference from LCD is the backlight layer 2. Compared with LCD screen, the performance of miniLED will be higher.

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

How to close the 'Do not cover the top of the screen' Detailed explanation: How to close the 'Do not cover the top of the screen' message that appears frequently on your phone How to close the 'Do not cover the top of the screen' Detailed explanation: How to close the 'Do not cover the top of the screen' message that appears frequently on your phone Mar 03, 2024 pm 01:31 PM

I believe many friends have encountered the problem that their mobile phones suddenly prompt: Do not cover the top of the screen. So why does the mobile phone suddenly appear like this? Let’s take a look together below. In fact, when this happens, something is blocking the distance sensor of the phone, so this prompt is received on the screen of the phone. So why did I suddenly receive such a prompt? In fact, it may be that you have accidentally turned on the [anti-accidental touch mode] on your phone, so this problem occurs. So how do we close it? In fact, the method is very simple. Let’s take a look at it together. Method 1: Directly follow the on-screen prompts to close using the shortcut key combination. Method 2: If the above method does not work, you can also open the phone’s [Settings]

Apple reveals iPhone 16 may have a larger display Apple reveals iPhone 16 may have a larger display Mar 22, 2024 pm 06:41 PM

Although it will be a long time before the release of the iPhone 16 series, there have been constant revelations about the appearance and configuration. According to Korean media SisaJournal, Apple plans to introduce new ultra-narrow bezel technology in the upcoming iPhone 16 series of mobile phones. The technology involves rolling internal copper wires into a more compact structure to reduce the bezel width of the phone's bottom display, allowing for a larger display. This innovative move aims to enhance the user experience, allowing users to enjoy a wider field of view and a more immersive entertainment experience. Apple has always been committed to continuously improving its product design and technology to bring more advanced functions and performance to users. The launch of the iPhone 16 series of mobile phones will further consolidate Apple’s leadership in smart phones. According to @SnapaDigital, Apple’s new

How to adjust the color when the screen turns black and white. Detailed introduction: How to exit black and white mode on your mobile phone. How to adjust the color when the screen turns black and white. Detailed introduction: How to exit black and white mode on your mobile phone. Mar 21, 2024 pm 01:12 PM

When many friends are using their mobile phones, they suddenly find that the operation interface of the mobile phone has turned into &quot;black and white&quot; color. They don't know what causes it or how to solve it. This article uses Android mobile phones as an example to teach you how to make it work. The color of the mobile phone's operating interface returns to normal. 1. Set up the interface of the mobile phone and find the &quot;gear-shaped&quot; icon in the operation interface. As shown below: Click this icon to enter the phone’s settings interface. 2. Options The operating interface of the mobile phone has changed to black and white, which is related to the &quot;Display&quot; setting of the mobile phone. After entering the settings interface of the mobile phone, find the &quot;Display and Theme&quot; option in the drop-down menu, as shown below: Then click &quot;Display and Theme&quot; option to enter the details page. 3. After changing the screen color and entering the &quot;Display and Theme&quot; option, find the &quot;

Don't think your phone screen is too big! The 3-inch really small screen mobile phone is here. I'm afraid you won't be able to hold it. Don't think your phone screen is too big! The 3-inch really small screen mobile phone is here. I'm afraid you won't be able to hold it. Feb 05, 2024 am 09:10 AM

Now when we talk about "small screen mobile phones", what do you think of? Is it the iPhone 12/13 mini released by Apple two years ago? Xiaomi 13/14, known as the small-screen flagship? Or is it the medium-sized version of Samsung and Google’s S series and Pixel series? In my opinion, these current mobile phones, which are called small screens by everyone, are not actually very small in size. For example, if you put the iPhone 13 mini and the early iPhone 3G together, it will be clear at a glance which one is the "big screen phone". You must know that when the iPhone 3G was launched, everyone was praising its "3.5-inch large screen" and did not think it was a "small screen" at all.

See all articles