wxml：

<view class='kongbai'>

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

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

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

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

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

<input class='ipt' placeholder='請(qǐng)輸入商家或商品名稱' 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)聽頁(yè)面滾動(dòng)

this.setData({

top: e.scrollTop

})? }，

newpage: function () {? ? ? ?

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

wx.navigateTo({

url: '../scout/scout',

})

}

總結(jié)

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

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