【实践总结】微信小程序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() {
    }
  }
})

最终效果扫描下面小程序二维码