【實踐總結】微信小程序scroll-view

背景

在作微信小程序時列表頁是最多見的頁面，多數包括列頂部搜索框，下面緊貼着可上下滑動的列表： 1.微信小程序幫助文檔較爲簡陋，不便於上手直接使用。

我但願經過我的的實踐總結幫助你們更快上手使用。

實現

搜索框

.wxml文件

 <view class="search-wrap">  
        <icon type="search" size="16" class="icon-search" />  
        <input type="text" placeholder="請輸入搜索內容" class="search-input" name="searchKeyword" bindinput="bindKeywordInput" value="{{searchKeyword}}" />  
    </view>  
    <!-- <view class="search-cancel" bindtap="keywordSearch">搜索</view>   -->
    <view class="search-cancel" bindtap="keywordAdd">添加</view>  
  </view>

複製代碼

頁面頂部搜索框，如圖

滑動列表

<scroll-view scroll-y="true" bindscrolltolower="searchScrollLower" >  
        <i-cell i-class='result-item'  wx:for="{{searchSongList}}" wx:key="unique"  data-data="{{item}}" label='{{item.desOne}}'  title="{{item.name}}" is-link url="/pages/friendDetail/index?id={{item._id}}"></i-cell>                 
      <!-- </view>   -->
      <view class="loading" hidden="{{!searchLoading}}">正在載入更多...</view>  
      <view class="loading complete" hidden="{{!searchLoadingComplete}}">已加載所有</view>  
    </scroll-view>  

複製代碼

頁面底部滑動列表，如圖

具體的方法屬性見微信官方文檔這裏再也不重複。

完整代碼

.wxml

<view class="search">  
  <view class="search-bar">  
    <view class="search-wrap">  
        <icon type="search" size="16" class="icon-search" />  
        <input type="text" placeholder="請輸入搜索內容" class="search-input" name="searchKeyword" bindinput="bindKeywordInput" value="{{searchKeyword}}" />  
    </view>  
    <!-- <view class="search-cancel" bindtap="keywordSearch">搜索</view>   -->
    <view class="search-cancel" bindtap="keywordAdd">添加</view>  
  </view>  
  <view class="search-result">  
    <scroll-view scroll-y="true" bindscrolltolower="searchScrollLower" >  
        <i-cell i-class='result-item'  wx:for="{{searchSongList}}" wx:key="unique"  data-data="{{item}}" label='{{item.desOne}}'  title="{{item.name}}" is-link url="/pages/friendDetail/index?id={{item._id}}"></i-cell>                 
      <!-- </view>   -->
      <view class="loading" hidden="{{!searchLoading}}">正在載入更多...</view>  
      <view class="loading complete" hidden="{{!searchLoadingComplete}}">已加載所有</view>  
    </scroll-view>    
  </view>  
</view>

複製代碼

.wxss

page{  
  display: flex;  
  flex-direction: column;  
  height: 100%;  
}  
  
/*搜索*/  
.search{  
  flex: auto;  
  display: flex;  
  flex-direction: column;  
  background: #fff; 
}  
.search-bar{  
  flex: none;  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  padding: 20rpx;  
  background: #f4f4f4; 
}  
.search-wrap{  
  position: relative;  
  flex: auto;  
  display: flex;  
  align-items: center;  
  height: 80rpx;  
  padding: 0 20rpx;  
  background: #fff; 
  border-radius: 6rpx;  
}  
.search-wrap .icon-search{  
  margin-right: 10rpx;  
}  
.search-wrap .search-input{  
  flex: auto;  
  font-size: 28rpx;  
}  
.search-cancel{  
  padding: 0 20rpx;  
  font-size: 28rpx;  
}  
  
/*搜索結果*/  
.search-result{  
  flex: auto;  
  position: relative;  
}  
.search-result scroll-view{  
  position: absolute;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  top: 0;  
}  
.result-item{  
  position: relative;  
  overflow: hidden;  
  border-bottom: 1rpx solid #e5e5e5; 
}  
  
.loading{  
  padding: 10rpx;  
  text-align: center; 
  font-size: 26rpx; 
}  
.loading:before{  
  display: inline-block;  
  margin-right: 5rpx;  
  vertical-align: middle;  
  content: '';  
  width: 40rpx;  
  height: 40rpx;  
  /* background: url(../../images/icon-loading.png) no-repeat;   */
  background-size: contain;  
  animation: rotate 1s linear infinite;  
}  
.loading.complete:before{  
  display: none;  
}

複製代碼

.js

Page({
  data: { 
  pageNum:0,
  pageCount:10,
  isLoad:false
  },
  //輸入框事件，每輸入一個字符，就會觸發一次  
  bindKeywordInput: function(e) {

  },
  keywordAdd() {

  },
  onLoad() {
    console.log('onLoad')
    
  },
  onShow(){
    this.fetchSearchList()

  },
  //搜索，訪問網絡  
  fetchSearchList: function() {

  },
  //點擊搜索按鈕，觸發事件  
  keywordSearch: function(e) {
  },
  //滾動到底部觸發事件  
  searchScrollLower: function() {
    }
  }
})

複製代碼

最終效果掃描下面小程序二維碼