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


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性能优化详解
May 15 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
vant自定义二级菜单操作
Nov 02 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关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
javascript 模拟点击广告
2010/01/02 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
Python Mysql自动备份脚本
2008/07/14 Python
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python判断有效的数独算法示例
2019/02/23 Python
简单了解python元组tuple相关原理
2019/12/02 Python
Python time库基本使用方法分析
2019/12/13 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
Python识别验证码的实现示例
2020/09/30 Python
python xlsxwriter模块的使用
2020/12/24 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
投资合作协议书范本
2014/04/17 职场文书
工作作风承诺书
2014/08/30 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
2019消防宣传标语!
2019/07/10 职场文书
Java8中接口的新特性使用指南
2021/11/01 Java/Android
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android