Scroll view pull-down refresh and pull-up load (bottom)

Antecedents feed

Components ：scroll-view

scroll-view It can realize a scrollable view area .

scroll-view Components have many properties , Commonly used ：

• enable-flex, Is it enabled? flex Layout , Only enable ,display:flex Will take effect . Boolean value , The default is false, That is, it is not enabled by default flex Layout .
• scroll-x, Whether horizontal scrolling is allowed . Boolean value , The default is false, That is, horizontal scrolling is not allowed by default .
• scroll-y, Allow vertical scrolling . Boolean value , The default is false , That is, vertical scrolling is not allowed by default . When using vertical scrolling , Need to give scroll-view Set a fixed height , That is, through wxss Set up height, The unit is rpx or px.
• scroll-into-view, Automatically scroll to the position of the specified element . Its value is scroll-view Of the subelements of id,id Is a string type , And can't start with a number .
• scroll-with-animation, Whether to use animation transition when scrolling the scroll bar . Boolean value , The default value is false, That is, animation transition is not used by default when scrolling .
• refresher-enabled, Enable pull-down refresh , Boolean value , The default is false, That is, pull-down refresh is not enabled by default .
• refresher-triggered, Set the current pull-down refresh status ,true Indicates that the pull-down refresh has been triggered ,false Indicates that the pull-down refresh is not triggered .
• bindrefresherrefresh, Triggered on pull-down refresh . Only when the pull-down refresh is enabled can it take effect , namely refresher-enabled It has to be for true when .
• bindscrolltolower, Scroll to the bottom （ Or on the right ） Trigger when .

Applet project

The main files involved in the code are ：

1. app.json
2. pages/index/index.wxml
3. pages/index/index.wxss
4. pages/index/index.js

app.json

{
    
  "pages": [
    "pages/index/index"
  ],
  "window": {
    
    "navigationBarBackgroundColor": "#0149af",
    "navigationBarTitleText": " home page ",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages/index/index.wxml

<view class="cameraContainer">
  <view class="header">
    <input type="text" class="search" placeholder=" Search for   There's everything here "/>
    <image src="/static/images/search.png"></image>
  </view>
  <view class="tabContainer">
    <scroll-view class="tabs" enable-flex scroll-x scroll-into-view="{
     {tabId}}" scroll-with-animation>
      <view class="tab {
     {item.id===tabId?'active':''}}" wx:for="{
     {tabList}}" wx:key="id" id="{
     {item.id}}" bindtap="changeTab">
        {
   {item.name}}
      </view>
    </scroll-view>
  </view>
  <scroll-view class="contentContainer" scroll-y refresher-enabled refresher-triggered="{
     {isTriggered}}" bindrefresherrefresh="handleRefresherRefresh" bindscrolltolower="handleScrollToLower" >
    <view class="content" wx:for="{
     {contentList}}" wx:key="{
     {index}}">{
   {item}}</view>
  </scroll-view>
</view>

pages/index/index.wxss

.cameraContainer{
    
  padding: 10rpx;
}
.header{
    
  display: flex;
  align-items: center;
  border: 1rpx solid #aaa;
  border-radius: 6rpx;
  padding: 6rpx 10rpx;
}
.header image{
    
  width: 36rpx;
  height: 36rpx;
  padding: 0 10rpx;
}
.header .search{
    
  flex: 1;
  height: 36rpx;
  line-height: 36rpx;
  font-size: 26rpx;
}
.tabContainer{
    
  margin-top: 20rpx;
}
.tabs{
    
  display: flex;
  height: 50rpx;
}
.tab{
    
  height: 40rpx;
  line-height: 40rpx;
  margin-right: 30rpx;
  white-space: nowrap;
  font-size: 28rpx;
}
.active{
    
  border-bottom: 4rpx solid #1a74f1;
}
.contentContainer{
    
  height: calc(100vh - 150rpx);
}
.content{
    
  width: 100%;
  height: 600rpx;
  line-height: 600rpx;
  text-align: center;
  background:#eee;
  color: #1a74f1;
  font-size: 64rpx;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
}

pages/index/index.js

Page({
    
  data:{
    
    tabList:[],
    tabId:'',
    contentList:[],
    isTriggered:false
  },
  onLoad(){
    
    this.getTabList();
  },
  changeTab(e){
    
    const tabId = e.target.id;
    const contentList = this.getContentList(tabId);
    this.setData({
    contentList,tabId})
  },
  getTabList(){
    
    let result = [
      {
    "id": "tab_1","name": " food "},
      {
    "id": "tab_2","name": " Bodybuilding "},
      {
    "id": "tab_3","name": " The movie "},
      {
    "id": "tab_4","name": " The hotel "},
      {
    "id": "tab_5","name": " Scenic spot "},
      {
    "id": "tab_6","name": " The supermarket ",},
      {
    "id": "tab_7","name": " Fruits "},
      {
    "id": "tab_8","name": " fresh "},
      {
    "id": "tab_9","name": " Tobacco and alcohol "},
      {
    "id": "tab_10","name": " Buy medicine ",},
      {
    "id": "tab_11","name": " train "},
      {
    "id": "tab_12","name": " subsidy "},
      {
    "id": "tab_13","name": " Home Furnishing "},
      {
    "id": "tab_14","name": " Pets "},
      {
    "id": "tab_15","name": " game "}
    ]
    this.setData({
    
      tabList:result,
      tabId:result[0].id,
      contentList:this.getContentList(result[0].id)
    })
  },
  getContentList(tabId=""){
    
    let result = [" other "," other "," other "," other "," other "];
    if(tabId.indexOf("1") > -1){
    
      result = [" KFC house express "," Sea of clouds food "," Xibei youmian village "," East slope of Meizhou "," Wallace "];
    }else if (tabId.indexOf("2") > -1){
    
      result = [" swimming "," Martial arts fight "," yoga "," badminton "," Basketball "];
    }else if(tabId.indexOf("3") > -1){
    
      result = [" Young Babylon "," forever "," Love myth "," Iron man "," Kung Fu Panda "]
    }
    this.setData({
    isTriggered:false})
    return result;
  },
  handleRefresherRefresh(){
    
    console.log("handle refresher refresh")
    this.getContentList(this.data.tabId)
  },
  handleScrollToLower(){
    
    console.log("handle scroll to lower");
    const temp = this.getContentList()
    const newContentList = [...this.data.contentList,...temp];
    this.setData({
    contentList:newContentList})
  }
})

Related links

1. Use scroll-view Realize vertical scrolling of content list
2. Use scroll-view Realization tabs（ Increase animation transition effect ）
3. Use scroll-view Realization tabs
4. Implementation of slider view
5. Use scroll-view Possible problems and solutions in implementing slider view
6. Wechat applet to event Object passing data
7. flex Layout ：flex-basic flex-grow flex-basis