校内实习第八天

作业详情：链接：https://pan.baidu.com/s/1XH6qsvm2c6Gd0zhZrnQbeQ 
提取码：5pc7 

微信小程序电商项目页面外观实现：新建了一个项目，用来实现外卖系统，本次实验对该电商项目的页面进行了实现，添加了搜索框，

bindscroll  eventhandle  默认为否   在滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

页面上下滚动的实现代码，以及监听事件bindscroll

<!-- 滚动的区域 -->

<scroll-view style='height:100%;' scroll-y="true" bindscroll="scrollTopfun">  </scroll-view>

.js文件上的

scrollTopfun:function(e){

this.setData({

top: e.detail.scrollTop,

})

// console.log(e.detail.scrollTop);

},

 

点击搜索框进入另一个页面的功能；

<!-- 搜索 -->

<view class="scout {{top>=20? 'fixed' :'' }}" bindtap="newpage">

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

<input class='ipt' placeholder='请输入商家或商品名称' placeholder-class='place' disabled="true"></input>

</view>

/ 打开搜索页面

newpage:function(){

// 跳转到页面

wx.navigateTo({

url: '../scout/scout',

})

},

以及将搜索框下拉到一定位置的时候固定在页面的顶部。

{{top>=20? 'fixed' :'' }}，利用监听事件bindscroll中获取的top来监听搜索框下拉到一定位置的时候固定在页面的顶部