小程序自定义模板实现吸顶功能


Posted in Javascript onJanuary 08, 2020

本文实例为大家分享了小程序实现吸顶功能的具体代码,供大家参考,具体内容如下

小程序自定义模板实现吸顶功能

//如图所示----这里用了自定义组件实现了小程序吸顶功能
//WXML
<view class="i-sticky-demo">
  <i-sticky scrollTop="{{scrollTop}}">
    <i-sticky-item i-class="i-sticky-demo-title">
      <view slot="title">
       第一层
      </view>
      <view slot="content" wx:for="{{one}}" wx:key="index">
        <view class="i-sticky-demo-item">{{item.name}}</view>
      </view>
    </i-sticky-item>
    <i-sticky-item i-class="i-sticky-demo-title">
      <view slot="title">
       第二层
      </view>
      <view slot="content" wx:for="{{two}}" wx:key="index">
        <view class="i-sticky-demo-item">{{item.name}}</view>
      </view>
    </i-sticky-item>
    <i-sticky-item i-class="i-sticky-demo-title">
      <view slot="title">
        第三层
      </view>
      <view slot="content" wx:for="{{three}}" wx:key="item">
        <view class="i-sticky-demo-item">{{item.name}}</view>
        
      </view>
    </i-sticky-item>
    <i-sticky-item i-class="i-sticky-demo-title">
      <view slot="title">
        最后
      </view>
      <view slot="content" wx:for="{{15}}" wx:key="index">
        <view class="i-sticky-demo-item">{{index+1}}</view>
      </view>
    </i-sticky-item>
  </i-sticky>
</view>
//json
{
 "navigationBarTitleText":"吸顶",
 "usingComponents": {
  "i-sticky": "../../compont/sticky/index",
  "i-sticky-item": "../../compont/sticky-item/index"
 }
}
//JS
Page({
 data: {
  scrollTop: 0,
  one: [{
   name: "第一层"
  }, {
   name: "第一层"
  }, {
   name: "第一层"
  }, {
   name: "第一层"
  }, {
   name: "第一层"
  }, {
   name: "第一层"
  }, {
   name: "第一层"
  }],
  two: [{
   name: "第二层"
  }, {
   name: "第二层"
  }, {
   name: "第二层"
  }, {
   name: "第二层"
  }, {
   name: "第二层"
  }, {
   name: "第二层"
  }, {
   name: "第二层"
  }, {
   name: "第二层"
  }],
  three: [{
   name: "第三层"
  }, {
   name: "第三层"
  }, {
   name: "第三层"
  }, {
   name: "第三层"
  }, {
   name: "第三层"
  }, {
   name: "第三层"
  }, {
   name: "第三层"
  }, {
   name: "第三层"
  }],
 },
 onChange(event) {
  console.log(event.detail, 'click right menu callback data')
 },
 //页面滚动执行方式
 onPageScroll(event) {
  this.setData({
   scrollTop: event.scrollTop
  })
 }
});
//WXSS
.i-sticky-demo-item{
 width: 100%;
 height: 100rpx;
 line-height: 100rpx;
 padding:0 30rpx;
 border-bottom: 1rpx solid #ddd;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 Javascript
微信小程序静默登录的实现代码
Jan 08 #Javascript
微信小程序wxs实现吸顶效果
Jan 08 #Javascript
微信小程序实现吸顶特效
Jan 08 #Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 #Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 #Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 #Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 #Javascript
You might like
PHP用户指南-cookies部分
2006/10/09 PHP
PHP实现Socket服务器的代码
2008/04/03 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
PHP多进程简单实例小结
2019/11/09 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
js实现下一页页码效果
2017/03/07 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
python导入坐标点的具体操作
2019/05/10 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
python psutil监控进程实例
2019/12/17 Python
python 追踪except信息方式
2020/04/25 Python
python如何实现递归转非递归
2021/02/25 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
优秀员工评语
2014/02/10 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
师恩难忘教学反思
2014/04/27 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
新教师教学工作总结
2015/08/12 职场文书
MYSQL如何查看操作日志详解
2022/05/30 MySQL