wxml：

<view class='kongbai'>

<view class="scout {{top>=32.4? 'scout-f' :'' }}" bindtap="newpage">?

通過三目運算，獲取手機(jī)系統(tǒng)當(dāng)前滾動條的值，實現(xiàn)樣式類名的轉(zhuǎn)化，使搜索框滑到頂部的時候，固定（fixed），

kongbai類主要起占位作用，既當(dāng)搜索框fixed時，是浮動的，沒kongbai的話頁面會向上移動搜索框的高度。

bindtap 點擊搜索框調(diào)用newpage方法，跳轉(zhuǎn)到新頁面。

<image class='img' src='../../icons/icon.png'></image>

<input class='ipt' placeholder='請輸入商家或商品名稱' placeholder-class='place' disabled="true"></input>

</view>

</view>

wxss：

.kongbai{

height: 88rpx;

}

.scout{

background-color: #fff;

display:flex;justify-content:center;

align-items: center;

padding: 0rpx 0 10rpx 0;

position: relative;

}

.scout-f{

width: 100%;

top: 0;

z-index: 1;

background-color: #fff;

display:flex;justify-content:center;

align-items: center;

padding: 0rpx 0 10rpx 0;

position: fixed;

}

js：

onPageScroll: function (e) {//監(jiān)聽頁面滾動

this.setData({

top: e.scrollTop

})? }，

newpage: function () {? ? ? ?

// 跳轉(zhuǎn)到頁面

wx.navigateTo({

url: '../scout/scout',

})

}

總結(jié)

以上是生活随笔為你收集整理的实训DAY08的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。