小程序搜索吸顶——《旧岛》(onPageScroll)

        昨天听了七月老师的直播,我录屏了,整个直播是两个小时三十七分钟四十二秒。全程的直播着重讲了程序员的自我发展,最后讲了下技术的发展,这个直播我会在明天或者后天整理出来,作为自己前进的一项总结。

        昨天下午开始学习七月老师的《旧岛》项目,这个我决定自己先写一遍,然后再听课、看源码、找不足。本篇是我自己在写《旧岛》项目时,关于搜索栏吸顶的记录。

        很久不写原生的小程序了,项目需要一直在做移动端H5开发,我不能丢了小程序开发。

        加油吧~菇凉!!!

       搜索框吸顶操作主要用到了,小程序Page-->onPageScroll(监听用户滑动页面事件),属性有scrollTop(页面在垂直方向上以滚动的距离,单位是:px)

     ①:wxml的view标签中,class用三目判断----

      ②:wxss中定义fixTop,用定位确定滚动时始终悬浮在页面顶部-----

.fixtop{
  position: fixed;
  top:0;
}

      ③:定义isScroll,用来判断是否滚动,初始值为false----

 data: {
    isScroll: false,  //判断是否滑动
  },

        ④:监听页面滚动,获取e.scrollTop值用来判断是否大于0

// 滚动时触发---顶部搜索栏吸顶
  onPageScroll: function(e) {
    console.log(e.scrollTop)
    let self = this;
    let isScroll = this.data.isScroll;
    console.log(isScroll);
    if (e.scrollTop > 0) {
      self.setData({
        isScroll:true
      })
    }else if (e.scrollTop <= 0) {
      self.setData({
        isScroll:false
      })
    }
  },

 

你可能感兴趣的:(微信小程序,小程序干货案列)