更新记录

1.0.0(2025-04-08) 下载此版本

1.0.0


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

功能描述

  • 本组件主要功能为实现 tab 标签页与其关联内容的双向绑定,即点击标签时会跳转至对应内容块,内容块滚动时会自动选中对应标签

使用说明

  • 本组件简单易用,只需传入标签文案的列表 list 即可,例如:["标签 1", "标签 2", "标签 3"]
  • 标签文案内容可通过 list 传入,也可通过名为 'label' + index的 slot 传入,index 从 0 开始
  • 内容需要通过名为'content' + index的 slot,index 从 0 开始
  • 标签 slot 和内容 slot 的个数需与 list 长度保持一致
  • 样式需要修改可自定覆盖样式

组件参数说明

list

  • 类型: Array
  • 必填: 是
  • 描述: 顶部标签内容文案数组,数组长度也代表标签及滚动内容块的总数量

示例代码

<AnchorScroller
  list={["标签1", "标签2", "标签3"]}
  style="width: 100%; height: 100%"
>
  <view slot="content1">
    <view class="day-title"> 内容标题1 </view>
    <view class="poi-item">
      联动标签1的内容块联动标签1的内容块联动标签1的内容块联动标签1的内容块联动标签1的内容块联动标签1的内容块
    </view>
  </view>
  <view slot="content2">
    <view class="day-title"> 内容标题2 </view>
    <view class="poi-item">
      联动标签2的内容块联动标签2的内容块联动标签2的内容块联动标签2的内容块联动标签2的内容块联动标签2的内容块
    </view>
  </view>
  <view slot="content3">
    <view class="day-title"> 内容标题3 </view>
    <view class="poi-item">
      联动标签3的内容块联动标签3的内容块联动标签3的内容块联动标签3的内容块联动标签3的内容块联动标签3的内容块
    </view>
  </view>
</AnchorScroller>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问