文章目錄
前情提要
組件：scroll-view
scroll-view可實現一個可滾動的視圖區域。
scroll-view 組件有很多屬性，常用的有：
enable-flex，是否啓用flex佈局，只有啓用，display:flex纔會生效。布爾值，默認是false，即默認不啓用flex佈局。scroll-x，是否允許橫向滾動。布爾值，默認是false，即默認不允許橫向滾動。scroll-y，是否允許豎向滾動。布爾值，默認是false，即默認不允許豎向滾動。使用豎向滾動時，需要給scroll-view設置一個固定的高度，即通過wxss設置height，單位是rpx或px。scroll-into-view，自動滾動到指定元素的位置上。它的值是scroll-view的子元素的id，id爲字符串類型，且不能以數字開頭。scroll-with-animation，滾動條滾動時是否使用動畫過渡。布爾值，默認值是false，即滾動時默認不使用動畫過渡。refresher-enabled，是否開啓下拉刷新，布爾值，默認是false，即默認不開啓下拉刷新。refresher-triggered，設置當前下拉刷新狀態，true表示下拉刷新已被觸發，false表示下拉刷新未被觸發。bindrefresherrefresh，下拉刷新時觸發。只有開啓下拉刷新纔會生效，即refresher-enabled必須爲true時。bindscrolltolower，滾動到底部（或者右邊）時觸發。
小程序項目
代碼涉及的主要文件有：
- app.json
- pages/index/index.wxml
- pages/index/index.wxss
- pages/index/index.js
app.json
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#0149af",
"navigationBarTitleText": "首頁",
"navigationBarTextStyle": "white"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}pages/index/index.wxml
<view class="cameraContainer">
<view class="header">
<input type="text" class="search" placeholder="搜一搜 這裏啥都有"/>
<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": "美食"},
{
"id": "tab_2","name": "健身"},
{
"id": "tab_3","name": "電影"},
{
"id": "tab_4","name": "酒店"},
{
"id": "tab_5","name": "景點"},
{
"id": "tab_6","name": "超市",},
{
"id": "tab_7","name": "水果"},
{
"id": "tab_8","name": "生鮮"},
{
"id": "tab_9","name": "菸酒"},
{
"id": "tab_10","name": "買藥",},
{
"id": "tab_11","name": "培訓"},
{
"id": "tab_12","name": "養車"},
{
"id": "tab_13","name": "家居"},
{
"id": "tab_14","name": "寵物"},
{
"id": "tab_15","name": "遊戲"}
]
this.setData({
tabList:result,
tabId:result[0].id,
contentList:this.getContentList(result[0].id)
})
},
getContentList(tabId=""){
let result = ["其他","其他","其他","其他","其他"];
if(tabId.indexOf("1") > -1){
result = ["肯德基宅急送","雲海餚","西貝莜麪村","眉州東坡","華萊士"];
}else if (tabId.indexOf("2") > -1){
result = ["游泳","武術搏擊","瑜伽","羽毛球","籃球"];
}else if(tabId.indexOf("3") > -1){
result = ["少年巴比倫","地久天長","愛情神話","鋼鐵俠","功夫熊貓"]
}
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})
}
})