微信小程序 - tab分页实现

GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类

小程序码

效果图：

引用微信 tabs ，命令行执行之后重新构建npm

npm i @miniprogram-component-plus/tabs --save

js 代码：

Page({/*** 页面的初始数据*/data: {active: 1,arr:['1','2','3','4'],tabs: [],arr2: [],activeTab: 0,},onLoad() {wx.setNavigationBarTitle({title: 'tab分页加载'})const titles = ['首页', '外卖', '商超生鲜', '购物', '美食饮品', '生活服务', '休闲娱乐', '出行']const tabs = titles.map(item => ({ title: item }))this.setData({ tabs })this.setData({ arr2: ['11', '22', '33', '44'] })},onTabCLick(e) {const index = e.detail.indexconsole.log('----------'+index);this.setData({ activeTab: index })},onChange(e) {const index = e.detail.indexconsole.log('----------'+index);this.setData({ activeTab: index })}})

json 代码：

{"usingComponents": {"mp-tabs": "@miniprogram-component-plus/tabs"},"disableScroll": true
}

wxml 代码：

<mp-tabs tabs="{{tabs}}" activeTab="{{activeTab}}" swiperClass="weui-tabs-swiper"bindtabclick="onTabCLick"bindchange="onChange"activeClass="tab-bar-title__selected"
><block wx:for="{{tabs}}" wx:key="title"><view class="tab-content" slot="tab-content-{{index}}" > {{item.title}} </view></block></mp-tabs>

wxss 代码：

.bgView {/* background-color: orange; */height: 500px;width: 100%;
}.bg {/* background: red; *//* position: fixed;top: 0;height: 40px; */
}page {background-color: pink;height: 100%;
}/* ------------ weui -------------- */
.weui-tabs-bar__wrp {border-bottom: 1px solid #eee;position: fixed;top: 0;height: 30px; z-index:9999;
}.weui-tabs-swiper {margin-top: 30px;width: 100%;height: 500px;background-color: yellow;
}.tab-content {width: 100%;height: 500px;display: flex;justify-content: center;align-items: center;box-sizing: border-box;/* padding: 40rpx; */background-color: orange;
}.weui-tabs-bar__title {margin: 0px 10px;
}.tab-bar-title__selected {font-size: 20px;font-weight: bold;
}

微信小程序 - tab分页实现相关推荐

navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
微信小程序显示分页列表
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序-tab左右滑动切换
微信小程序-tab左右滑动切换一.简介 1.核心思想二.实现 1.wxml实现 2.js实现 3.wxss实现三.参考和总结四.优化 0.效果图 1.每个tab长度自适应 2.先前隔tab点击 ...
微信小程序php分页加载,微信小程序分页加载
分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验.那么今天的这篇文章就是介绍微信小程序 ...
微信小程序|Tab标签页
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 欢迎加入团队圈子!与作者面对面!直接点击! 问题描述在使用小 ...
微信小程序-如何分页加载数据
小程序通过数据库读取数据一次最多读取20条,云函数一次最多读取100条,所以如果我们要读取更多的数据就要借助分页加载,通过分次的加载数据,然后将每次获取到的数据拼接起来,就可以在页面显示更多的数据. ...
微信小程序tab导航+滚动顶部吸附效果（开发实例）
具体思路如下,我们首先要拿到需要吸附元素的据顶部距离,然后再去判断,如果超过了,我们通过判断添加样式即可,如在有不理解的,可以私信小编. <view style="height:100 ...

微信小程序 - tab分页实现

GitHub Demo 地址: `jh-weapp-demo` 实现一些常用效果、封装通用组件和工具类

小程序码

效果图：

js 代码：

json 代码：

wxml 代码：

wxss 代码：

微信小程序 - tab分页实现相关推荐

最新文章

热门文章

微信小程序 - tab分页实现

GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类

小程序码

效果图：

js 代码：

json 代码：

wxml 代码：

wxss 代码：

微信小程序 - tab分页实现相关推荐

最新文章

热门文章

GitHub Demo 地址: `jh-weapp-demo` 实现一些常用效果、封装通用组件和工具类