原生顶部选项卡示例

本示例是 uni-tab-content.nvueuni-tab-bar.nvueuni-tabs.nvueuni-media-list.nvue 的组合使用示例,展示了资讯类信息列表。

示例数据均为静态数据,若数据为服务端获取,可在 created 生命周期里,请求服务端接口生成如下结构的数据:

列表数据结构说明:

属性名 类型 是否必填 说明
article_type Number 文章类型,可选值:0(纯文字)、1(左图右文)、2(左文右图)、3(标题加一排图片)、4(标题加一个大图)
datetime String 发表时间
title String 标题文字
image_url String article_type为1、2、4时必选 图片地址
image_list Array article_type为3时必选 图片列表,格式为[{url:xxxx},{url:xxx}]
source String 作者
comment_count Number 评论数

uni-tabs组件参数说明:

属性名 类型 是否必填 说明
index Number 当前选择页面内容索引,通过change 函数获取
change Function 当前tab 切换执行,返回当前tab的索引

uni-tab-bar组件参数说明:

属性名 类型 是否必填 说明
drag Boolean tabbar是否滚动,默认为:true
tabIndex Number 当前选择的tab索引

注意事项

  • uni-tabsindex属性 和 uni-tab-bartabIndex属性,请保持一致。
  • weex(.nvue后缀文件) 只支持在App端运行。

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

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

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

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