小程序列表标题吸顶

  
  
    
      
        
      
    
  
  

  
    第一层标题
  
  
    第一层标题
  
  
  
    
      {{index+1}}第一层简介列表
    
  

/**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
    });
  }
})