当前仓库属于暂停状态,部分功能使用受限,详情请查阅 仓库状态说明
1 Star 0 Fork 22

craboy1 / sticky-tabs
暂停

forked from 胖橘晏 / sticky-tabs 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
README.md 1.80 KB
一键复制 编辑 原始数据 按行查看 历史
胖橘晏 提交于 2019-05-02 22:39 . edit readme

微信小程序吸顶+锚点组件

体验

效果图

效果图

引入组件

components 文件夹拷贝至自己的组件目录,页面 json 文件中配置组件

{
  "usingComponents": {
    "sticky": "/components/sticky/index",
    "sticky-item": "/components/sticky-item/index"
  }
}

在页面 wxml 中引入组件

  <sticky scrollTop="{{scrollTop}}" tabList="{{tabList}}">
      <sticky-item>
      </sticky-item>
  </sticky>

主要属性

1.tabList为吸顶tabs中对应的数据

    tabs: [{
      title: '锚点1'
    }, {
      title: '锚点2'
    }],

2.scrollTop为页面滚动的距离,使用示例如下

  onPageScroll(e) {
    let scrollTop = e.scrollTop;
    this.setData({
      scrollTop
    })
  },

3.sync 开启响应异步容器变化高度变化的开关。

注意:sync和init必须配合使用,否则无效。 使用场景如下: 1) 在sticky-item中数据为异步请求 2) sticky-item中内容的需要实现显示/隐藏功能

4.init 当需要重新计算sticky-item内容器高度时,改变init的值为!init,使用示例如下

  <l-sticky sync init="{{updateSticky}}" scrollTop="{{scrollTop}}" tabList="{{tabGroups}}">
  </sticky>
  initSticky() {
    this.setData({
      updateSticky: !this.data.updateSticky
    })
  }

下一版本为tabs增加滑动功能

马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
微信
1
https://gitee.com/craboy1/sticky-tabs.git
git@gitee.com:craboy1/sticky-tabs.git
craboy1
sticky-tabs
sticky-tabs
master

搜索帮助

344bd9b3 5694891 D2dac590 5694891