はじめに
改造前と改造後の比較表
ソリューションのアイデア
あなたは神々がどのように行うかを見ることができるときにアイデアを持っていないときは、非常に良い仕事をするために小さなプログラムのコンポーネントを賞賛があり、タブの天井の効果を移動するページがあり、私は効果が似ている感じとしたいし、ソースコードを見て、天井の粘着この属性とタブのタブを参照してくださいには、次の図です。
下図のように、ソースコードもfixedで配置されますが、このプロパティを最初に設定することはできません。
下のイメージでは、ページがスクロールしたときにfixed属性が付与されていますが、この方法を見つけたことで、スクロール時に再びfixed属性を追加し、機能を洗練させることができるようになりました。
ソリューション
- .jsはdefault属性を設定し、fixed属性はページがスクロールしているときに設定されます。
data{
isScroll:false,
}
- .wxmlは、コンポーネントで検索すると素晴らしいです、あなたは公式文書が引用されている方法を見ることができます。con_topスタイルを設定したときにisScrollがtrueの場合、.con_topは固定配置になります。con_topが固定配置になると、ビューの高さが元の高さより低くなるので、次のレイヤーでビューの高さをサポートするように、判定方法が逆になります！そして、ページがちらつかないように、fixedBoxの高さを固定する要素に取得するメソッドを書きます。
<view>
//トップ要素を開始する
<view class="{{isScroll?'con_top':''}}" id="fixedBox">
<van-search value="{{ value }}" placeholder="検索語は"/"を入力する>
//その他の上位要素
</view>
<view style="height:{{fixedHeight}}" hidden="{{!isScroll}}"></view>
//トップ要素の終わり
//リスト開始
<view>
...
</view>
//リストの最後
</view>
.con_top{
position: fixed;
top: 0;
z-index: 1;
left: 0;
right: 0;
}
- fixedBoxの高さを取得する方法は以下の通りです。
//トップボックスの高さを取得する
getFixedHeight:function(){
var that = this;
var query = wx.createSelectorQuery();
//IDを選択する
query.select('#fixedBox').boundingClientRect()
query.exec(function (res) {
var height = res[0].height;
that.setData({
fixedHeight:height + 'px'
})
})
},
- 最終的にスクロールすると、その上にtrueに設定されたisScrollは、ちょうど小さなプログラムのページがonPageScrollメソッドをページスクロールしており、H5比較、小さなプログラムの開発があまりにも簡単ですが、多くのインターフェイス自体が書かれているため、独自の、または良いか悪いかを記述する必要はありません。
//ページスクロールトリガーイベントハンドラ関数
onPageScroll:function(e){
var scrollTop = e.scrollTop;
if(scrollTop >= 0){
this.setData({
isScroll:true
})
}else{
this.setData({
isScroll:false
})
}
},
