uni-app 小程序分段器tab 的实现

效果图如图

1，写好四个要展示的组件

注意：组件的命名一定要规范，例如home-XXX，XXX 一定要写英文不能乱写，否则不能显示组件；

2，进行展示

<home-recommend></home-recommend>
<home-category></home-category>
<home-new></home-new>
<home-album></home-album>

3，引入uni-ui 的分段器组件

import { uniSegmentedControl } from "@dcloudio/uni-ui";

4，注册分段器组件

components: {uniSegmentedControl,},

5，提供标题数据 data 和事件函数

data() {return {items: [{ title: "专辑" },{ title: "分类" },{ title: "最新" },{ title: "推荐" },],current: 0,};},methods: {onClickItem(e) {if (this.current !== e.currentIndex) {this.current = e.currentIndex;}},},

6，填入 wxml

 <view><uni-segmented-control:current="current":values="items.map((v) => v.title)"@clickItem="onClickItem"style-type="text"active-color="red"></uni-segmented-control><view class="content"><view v-if="current === 0"> <home-recommend></home-recommend> </view><view v-if="current === 1"> <home-category></home-category> </view><view v-if="current === 2"> <home-new></home-new> </view><view v-if="current === 3"> <home-album></home-album> </view></view></view>

具体请查看官方文档

uni-app 小程序分段器tab 的实现相关推荐

uni.app小程序的ajax封装详细讲解
我懒得说了 //放url相同的片段 const rootUrl = ""// 示例: ajax({ url:'/api/login', param: param, method: ...
uni.app小程序登录页持久化存储和退出后清除本地缓存
持久化存储在store里面的user.js(自己创建的)中 export default {state: {status: false, //登录的状态,获取数据中status是1,登录成功时状态为 ...
uni.app小程序失焦聚焦，表单验证
<input type="text" placeholder="请输入手机号/邮箱/账号" v-model="username" @f ...
uni.app小程序实现跳转获取数据
式例如上图所示 (前提是点击索引获得的id与获得数据的id是一样的) 首先是获取文档的数据我用的async await来获取数据,也可以用.then方法获取数据 async onLoad() {le ...
uniapp使用uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能
uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能官网提供的api进行的开发,自我感觉没啥问题,但是在不同的端上好像有的好使有的不好使,暂时不知道啥 ...
php阅读器开发,微信小程序阅读器的简单实例开发
这篇文章主要介绍微信小程序阅读器的简单实例开发的相关资料,需要的朋友可以参考下今天和朋友聊天说到小程序,然后看在看书,然后我们就弄了个小读书的demo,然后现在分享一下. 一.先来上图: 首先先说下 ...
代驾APP小程序源码交付所需功能大全
生活水平的提高,使得车已经是现代人生活中不可或缺的代步工具了,但有时候因为疲劳或者是应酬喝了酒没办法继续驾车,招人代驾就很有必要了,代驾APP小程序就是这样应运而生的.代驾系统开发时,不要具备哪些基本 ...
uniapp中的分享功能实现(APP,小程序，公众号)
uniapp中的分享功能实现(APP,小程序,公众号) 1.APP端的分享 app端的分享可以直接使用uniapp封装的方法uni.share,uni-app的App引擎已经封装了微信.QQ.微博的分 ...
省钱兄校园跑腿源码（公众号+APP+小程序+Android+IOS）校园跑腿社区跑腿同城跑腿任务兼职小程序uniapp前端模版
开源代码是用户端uniapp部分源码,使用hbuilder导入即可运行只提供参考学习使用!已经获得软著!不可商业使用!感谢支持 h5体验地址 h5:https://paotui.xianmxkj.c ...

uni-app 小程序分段器tab 的实现

uni-app 小程序分段器tab 的实现相关推荐

最新文章

热门文章

uni-app 小程序分段器tab 的 实现

uni-app 小程序分段器tab 的 实现相关推荐

最新文章

热门文章

uni-app 小程序分段器tab 的实现

uni-app 小程序分段器tab 的实现相关推荐