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


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 live
May 15 Javascript
JavaScript 对象、函数和继承
Jul 07 Javascript
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
微信小程序静默登录的实现代码
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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
在Python中给Nan值更改为0的方法
2018/10/30 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
python下载库的步骤方法
2019/10/12 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
成龙霸王洗发水广告词
2014/03/14 职场文书
会计求职自荐信
2014/06/20 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
2014年体育工作总结
2014/11/24 职场文书
拾金不昧表扬信
2015/01/16 职场文书
小班教师个人总结
2015/02/05 职场文书
毕业生自荐信范文
2015/03/05 职场文书
观后感的写法
2015/06/19 职场文书