频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
小程序列表标题吸顶教程
2018-08-08 16:57:55      个评论      
收藏   我要投稿

\\




  
  
    
      
      
    
  
  
  
    第一层标题
  
  
    第一层标题
  
  
  
    
      {{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: 龙8国际娱乐pt老虎机fff;
    font-size: 40rpx; 
    border-bottom: 2rpx solid 龙8国际娱乐pt老虎机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 龙8国际娱乐pt老虎机ccc;
}
Page({
  data: {
    fixTop: &龙8国际娱乐pt老虎机39;&龙8国际娱乐pt老虎机39;, //区域离顶部的高度
    scrollTop: 0, //滑动条离顶部的距离
    // 数据
    movies: [
      { url: &龙8国际娱乐pt老虎机39;https://img04.tooopen.com/images/20130712/tooopen_17270713.jpg&龙8国际娱乐pt老虎机39; },
      { url: &龙8国际娱乐pt老虎机39;https://img04.tooopen.com/images/20130617/tooopen_21241404.jpg&龙8国际娱乐pt老虎机39; },
      { url: &龙8国际娱乐pt老虎机39;https://img04.tooopen.com/images/20130701/tooopen_20083555.jpg&龙8国际娱乐pt老虎机39; },
      { url: &龙8国际娱乐pt老虎机39;https://img02.tooopen.com/images/20141231/sy_78327074576.jpg&龙8国际娱乐pt老虎机39; }
    ] 
  },
  // 显示
  onShow: function() {
    let self = this;
    wx.createSelectorQuery().select(&龙8国际娱乐pt老虎机39;.static-news&龙8国际娱乐pt老虎机39;).boundingClientRect(function(rect) {
      self.setData({
        fixTop: rect.top,
      })
    }).exec()
  },
  // 高度
  onPageScroll: function(res) {
    let self = this;
    let top = res.scrollTop;
    self.setData({
      scrollTop: top
    });
  }
})
点击复制链接 与好友分享!回本站首页
上一篇:tcp的三次握手与四次分手
下一篇:iview的Modal对话框与表单验证冲突解决
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑--致力于做实用的IT技术学习网站

龙8国际娱乐pt老虎机