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


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 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
Vue路由权限控制解析
Nov 09 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 at(@)符号的用法简介
2009/07/11 PHP
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
Python Sleep休眠函数使用简单实例
2015/02/02 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
使用python 3实现发送邮件功能
2018/06/15 Python
python实现任意位置文件分割的实例
2018/12/14 Python
Python变量类型知识点总结
2019/02/18 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
Python利用命名空间解析XML文档
2020/08/10 Python
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
开会迟到检讨书
2014/02/03 职场文书
企业内部培训方案
2014/02/04 职场文书
影子教师研修方案
2014/06/14 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸
Elasticsearch 配置详解
2022/04/19 Java/Android