小程序列表标题吸顶

版权声明：菜鸟老五 https://blog.csdn.net/qq_35695041/article/details/81352247

<!--index.wxml-->
<!-- 最外层 -->
<view class="pages">
  <!-- 轮播 -->
  <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
    <block wx:for="{{movies}}" wx:for-index="index">
      <swiper-item>
        <image src="{{item.url}}" class="slide-image" mode="aspectFill" />
      </swiper-item>
    </block>
  </swiper>
  <!-- 第一层标题 -->

  <view class="cont fix-news" wx:if="{{fixTop<scrollTop}}">
    <text>第一层标题</text>
  </view>
  <view class="cont static-news" wx:else>
    <text>第一层标题</text>
  </view>
  <!-- 列表数据 -->
  <view class="list" wx:for="{{10}}" wx:key="{{index}}">
    <view>
      {{index+1}}第一层简介列表
    </view>
  </view>

</view>

/**index.wxss**/
/* 轮播视图 */
.swiper {
  height: 400rpx;
  width: 100%;
}
/* 图片 */
.swiper image {
  height: 100%;
  width: 100%;
}

/* tab_title视图样式 */
.cont{
    background: teal;
    width: 100%;
    line-height: 100rpx;
    color: #fff;
    font-size: 40rpx; 
    border-bottom: 2rpx solid #ccc;
}
/* cont中的text 左边距 */
.cont text{
    padding-left: 30rpx;
}
.cont.fix-news{
    position: fixed;
    top:0;
    left: 0;
}

/* 列表数据 */
.list{
   padding: 0 30rpx;
    line-height: 160rpx;
    text-align: left;
    border-bottom: 2rpx solid #ccc;
}

Page({
  data: {
    fixTop: '', //区域离顶部的高度
    scrollTop: 0, //滑动条离顶部的距离
    // 数据
    movies: [
      { url: 'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg' },
      { url: 'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg' },
      { url: 'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg' },
      { url: 'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg' }
    ] 
  },
  // 显示
  onShow: function() {
    let self = this;
    wx.createSelectorQuery().select('.static-news').boundingClientRect(function(rect) {
      self.setData({
        fixTop: rect.top,
      })
    }).exec()
  },
  // 高度
  onPageScroll: function(res) {
    let self = this;
    let top = res.scrollTop;
    self.setData({
      scrollTop: top
    });
  }
})