原生的應用經常會有頁面嵌套列表，滾動列表能夠改變列表大小，然后還能支持列表內下拉刷新等功能。看了很多的小程序好像都沒有這個功能，難道這個算是原生獨享的嗎，難道是由于手勢沖突無法實現嗎，冷靜的思考了一下，又看了看小程序的手勢文檔（文檔地址），感覺我又行了。

實現效果如下：

頁面區域及支持手勢

• 紅色的是列表未展開時內容展示，無手勢支持
• 綠色部分是控制部分，支持上拉下拉手勢，對應展開列表及收起列表
• 藍色列表部分，支持上拉下拉手勢，對應展開列表，上拉下拉刷新等功能
• 淺藍色部分是展開列表后的小界面內容展示，無手勢支持

原理實現

主要是根據事件系統的事件來自行處理頁面應當如何響應，原理其實同原生的差不多。
主要涉及 touchstart、touchmove、touchend、touchcancel 四個

另外的scrollview的手勢要借助于 scroll-y、refresher-enable 屬性來實現。

之后便是稀疏平常的數學加減法計算題環節。根據不同的內容點擊計算頁面應當如何繪制顯示。具體的還是看代碼吧，解釋起來又要吧啦吧啦了。

Talk is cheap, show me the code

代碼部分

wxml

<!--index.wxml-->
<view><view class="header" style="opacity: {{headerOpacity}};height:{{headerHeight}}px;"></view><view class="toolbar"data-type="toolbar"style="bottom: {{scrollHeight}}px;height:{{toolbarHeight}}px;"catch:touchstart="handleToolbarTouchStart"catch:touchmove="handleToolbarTouchMove"catch:touchend="handleToolbarTouchEnd"catch:touchcancel="handleToolbarTouchEnd"></view><scroll-view class="scrollarea" type="list"scroll-y="{{scrollAble}}"refresher-enabled="{{scrollAble}}"style="height: {{scrollHeight}}px;"bind:touchstart="handleToolbarTouchStart"bind:touchmove="handleToolbarTouchMove"bind:touchend="handleToolbarTouchEnd"bind:touchcancel="handleToolbarTouchEnd"bindrefresherrefresh="handleRefesh"refresher-triggered="{{refreshing}}"><view class="item" wx:for="{{[1,2,3,4,5,6,7,8,9,0,1,1,1,1,1,1,1]}}"></view></scroll-view><view class="mini-header"style="height:{{miniHeaderHeight}}px;"wx:if="{{showMiniHeader}}"></view>
</view>

ts

// index.ts
// 獲取應用實例
const app = getApp<IAppOption>()Component({data: {headerOpacity: 1,scrollHeight: 500,windowHeight: 1000,isLayouting: false,showMiniHeader: false,scrollAble: false,refreshing: false,toolbarHeight: 100,headerHeight: 400,miniHeaderHeight: 200,animationInterval: 20,scrollviewStartY: 0,},methods: {onLoad() {let info = wx.getSystemInfoSync()this.data.windowHeight = info.windowHeightthis.setData({scrollHeight: info.windowHeight - this.data.headerHeight - this.data.toolbarHeight})},handleToolbarTouchStart(event) {this.data.isLayouting = truelet type = event.currentTarget.dataset.typeif (type == 'toolbar') {} else {this.data.scrollviewStartY = event.touches[0].clientY }},handleToolbarTouchEnd(event) {this.data.isLayouting = falselet top = this.data.windowHeight - this.data.scrollHeight - this.data.miniHeaderHeight - this.data.toolbarHeightif (top > (this.data.headerHeight - this.data.miniHeaderHeight) / 2) {this.tween(this.data.windowHeight - this.data.scrollHeight, this.data.headerHeight + this.data.toolbarHeight, 200)} else {this.tween(this.data.windowHeight - this.data.scrollHeight, this.data.miniHeaderHeight + this.data.toolbarHeight, 200)}},handleToolbarTouchMove(event) {if (this.data.isLayouting) {let type = event.currentTarget.dataset.typeif (type=='toolbar') {this.updateLayout(event.touches[0].clientY + this.data.toolbarHeight / 2)} else {if (this.data.scrollAble) {return} else {this.updateScrollViewLayout(event.touches[0].clientY)}}}},handleRefesh() {let that = thissetTimeout(() => {that.setData({refreshing: false})}, 3000);},updateLayout(top: number) {if (top < this.data.miniHeaderHeight + this.data.toolbarHeight) {top = this.data.miniHeaderHeight + this.data.toolbarHeight} else if (top > this.data.headerHeight + this.data.toolbarHeight) {top = this.data.headerHeight + this.data.toolbarHeight}let opacity = (top - (this.data.miniHeaderHeight + this.data.toolbarHeight)) / (this.data.miniHeaderHeight + this.data.toolbarHeight)let isReachTop = opacity == 0 ? true : falsethis.setData({scrollHeight: this.data.windowHeight - top,headerOpacity: opacity,showMiniHeader: isReachTop,scrollAble: isReachTop})},updateScrollViewLayout(offsetY: number) {let delta = offsetY - this.data.scrollviewStartYif (delta > 0) {return}delta = -deltaif (delta > this.data.headerHeight - this.data.miniHeaderHeight) {delta = this.data.headerHeight - this.data.miniHeaderHeight}let opacity = 1 - (delta) / (this.data.headerHeight - this.data.miniHeaderHeight)let isReachTop = opacity == 0 ? true : falsethis.setData({scrollHeight: this.data.windowHeight - this.data.headerHeight - this.data.toolbarHeight + delta,headerOpacity: opacity,showMiniHeader: isReachTop,scrollAble: isReachTop})},tween(from: number, to: number, duration: number) {let interval = this.data.animationIntervallet count = duration / intervallet delta = (to-from) / countthis.tweenUpdate(count, delta, from)},tweenUpdate(count: number, delta: number, from: number) {let interval = this.data.animationIntervallet that = thissetTimeout(() => {that.updateLayout(from + delta)if (count >= 0) {that.tweenUpdate(count-1, delta, from + delta)}}, interval);}},
})

less

/**index.less**/
.header {height: 400px;background-color: red;
}
.scrollarea {position: fixed;left: 0;right: 0;bottom: 0;background-color: blue;
}
.toolbar {height: 100px;position: fixed;left: 0;right: 0;background-color: green;
}
.mini-header {position: fixed;top: 0;left: 0;right: 0;height: 200px;background-color: cyan;
}
.item {width: 670rpx;height: 200rpx;background-color: yellow;margin: 40rpx;
}