实训 Day08 实习日志

今天学习了微信小程序电商项目页面的外观，主要实现了主页面的布局、主页面搜索框的页面跳转，以及底部导航条之中的页面的路由功能，还实现了页面的上下滚动，并实现了如何把一个view在滚动时固定定位在页面顶部。

页面跳转使用了 wx.navigateTo(Object object) 路由组件（保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。）:

<!-- 搜索 -->
<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',
    })
  },

使一个view固定在页面顶部使用fixed定位，给一个类的样式设置如下：

.fixed{
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
}

页面上下滚动使用scroll-view实现：

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