天井：ページがスクロールされたときにヘッド位置にボックスを固定することを指し、通常はタブバーを固定します
実現のアイデア
- vantコンポーネントライブラリによって提供される小さなプログラムコンポーネントを使用すると、パッケージは完璧で、コピーして使用でき、vant-Weappのスティッキーレイアウトは本当に香りがよいです。
私たちは、vant-weappプラグインをインストールNPMモジュールを構築し、それを使用することができます前に、JSONでコンポーネントを登録する必要があります。それをインストールする方法については、公式サイトの説明書を参照してください。
それは価値があることを指摘され
ます場合WeChatアプレットに付属のスクロールビューコンポーネントを使用すると、スティッキーレイアウトコンポーネントの使用が失敗します。
おそらく、スクロールビュースクロールでは、スティッキーレイアウトコンポーネントが一番上に到達したかどうかを認識できないためです...
解決策：他のアイデアを変更する（スクロールビューではない、または前衛的なスティッキーレイアウトを使用しない）
//scroll-view
<scroll-view scroll-y="true" style="height: 300rpx;" >
//vant吸顶无法生效
<van-sticky>
<van-button type="primary">基础用法</van-button>
</van-sticky>
</scroll-view>
- スクロールビューで独自のラベルバーを作成し、クラス名を動的にバインドすると、クラス名に対応するスタイルが頭に固定されて天井効果を実現します。
// wxml代码
//滚动方向
<scroll-view scroll-y="true" style="height: 300rpx;"
bindscroll="scroll"> //滚动事件
//动态绑定样式的标签栏
//定义了fixed变量，使用判断其为true，绑定样式为fixedTop，否则为''
<view id="boxFixed" class="{
{fixed==true?'fixedTop':''}}">
<view>标签</view>
</view>
</scroll-view>
// wxss样式代码
.fixedTop{
position: fixed;
left: 0;
top: 0;
}
// js代码
//滚动事件
data{
fixed:false
}
scroll: function (e) {
//拿到滚动高度，达到标签栏高度就改变状态
// console.log(e.detail.scrollTop);
if (e.detail.scrollTop >= 547) {
this.setData({
fixed: true
})
} else {
this.setData({
fixed: false
})
}
},
- 2つのボックスを書き込みます。1つはヘッドに固定され、デフォルトでは変数によって非表示（非表示属性）になり、もう1つは通常はスクロールコンテナに表示され、特定の高さに達して状態を変更し、表示と非表示を切り替えます。
- 後でそれについて話す
トップに戻る
Scroll - viewには属性scroll-top = "{ {scrollTop}}"が付属しており、垂直スクロールバーの距離を表します。scroll
-with-animation= "true"は、スクロールバーの位置変更のアニメーションを表します。
//wxml 代码
<scroll-view scroll-y
scroll-top="{
{scrollTop}}"
scroll-with-animation="true"
style="height: 100vh;">
<view>我是大概有100vh的内容</view>
<button bindtap="goTop">Top</button>
</scroll-view>
//js代码
data{
scrollTop:0
}
//回到顶部
goTop() {
//scroll-view的方法
this.setData({
scrollTop: 0
})
},
他の方法
スクロールビューを使用しない場合は、さらに簡単です。
WeChatアプレットには、スクロールの高さを取得するためのスクロール監視イベントが付属しています
//如果你的盒子内就一个scroll-view盒子，在里面滚动触发不了该事件 enmmm
onPageScroll(e) {
// console.log(e);
console.log(scrollTop);
},
//回到顶部，点击事件调用这个方法，完事
wx.pageScrollTo({
scrollTop: 0
})