wx :swipertab切换
<view>
<view class="navbar">
<block wx:for="{{body}}" wx:key="index">
<view class="navbar-item {{activeIndex === index ? 'active':''}}" style="position: relative;">
<text> {{ item.text }} </text>
<view data-value="{{index}}" style="position: absolute;top: 0;left: 0;right: 0;bottom:0;z-index: 999" bindtap="bodyChange"></view>
</view>
</block>
</view>
<swiper class="body-data" duration="500" bindchange="bodySwiper" current="{{activeIndex}}">
<block wx:for="{{body}}" wx:key="index">
<swiper-item>
<block wx:if="{{body[index].data.length!=0}}">
<scroll-view scroll-y bindscroll="bodyscroll">
<block wx:for="{{body[index].data}}" wx:key="index">
<view>{{item.name}}</view>
</block>
</scroll-view>
</block>
<block wx:else>
<view>暂无数据</view>
</block>
</swiper-item>
</block>
</swiper>
</view>
// pages/swipertab/swipertab.js
Page({ /**
* 页面的初始数据
*/
data: {
activeIndex:0,
body:[
{
value:'',text:'首页',
data:[
{name:'最新消息0'},
{name:'最新消息'}
]
},
{
value:'',text:'首页1',
data:[
{name:'最新消息1'},
{name:'最新消息'}
]
},
{
value:'',text:'首页2',
data:[
{name:'最新消息2'},
{name:'最新消息'}
]
},
{
value:'',text:'首页3',
data:[
{name:'最新消息3'},
{name:'最新消息'}
]
},
{
value:'',text:'首页4',
data:[
{name:'最新消息4'},
{name:'最新消息'}
]
},
{
value:'',text:'首页5',
data:[
{name:'最新消息5'},
{name:'最新消息'}
]
},
{
value:'',text:'首页6',
data:[]
},
{
value:'',text:'首页7',
data:[]
},
{
value:'',text:'首页8',
data:[]
},
{
value:'',text:'首页9',
data:[]
},
{
value:'',text:'首页10',
data:[]
}
]
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { }, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, bodyChange(e){
this.setData({
activeIndex:e.target.dataset.value
})
},
bodySwiper(e){
this.setData({
activeIndex:e.detail.current
})
},
bodyScroll(e){
console.log(e)
}, }
})
page{
min-height: 100vh;
background: #ccc;
}
.active{
background: red;
transition: 0.3s;
}
wx :swipertab切换的更多相关文章
- 微信小程序开发基础知识总结
微信小程序在无论在功能.文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破H5页面应用的限制,更加接近原生程序的功能,因此微信小程序具有很 ...
- oracle创建Javasource实现数据库备份
因客户需求,需要在业务系统中,菜单中的网页中的按钮中加入一个按钮,用于点击备份数据库 (环境:只配置了数据源连接oralce ,应用服务器和数据服务器不在一台机器,且数据库机器oracle操作系统账号 ...
- 实现自定义的小程序底部tabbar
背景 诶,当然是为了实现更有温度的代码啦(背后设计师拿着刀对着我) 自带tabbar app.json中配置: tabBar: { backgroundColor: '#fff', borderSty ...
- 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab
解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...
- 微信小程序标签页切换
WXML中: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab== ...
- 微信小程序--问题汇总及详解之tab切换
设置背景颜色就直接在page里设置 page {background-color: rgb(242, 242, 242);} tab切换: navigator 页面链接 传参的格式为url=&q ...
- weui tabbar 切换
Html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...
- weui 多网页切换效果分析
weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...
- 微信小程序小技巧系列《一》幻灯片,tab导航切换
作者:gou-tian 来自:github 幻灯片 使用微信小程序原生组件swiper实现. <swiper indicator-dots="{{indicatorDots}}&quo ...
随机推荐
- Entity Framework 6.0 常见异常及解决办法
Ø 简介 本文主要记录 EF(Entity Framework) 在平时的开发中可能遇到的异常,以及应该如何去解决. 1. System.InvalidOperationException 1) ...
- zookeeper客户端 zkCli使用及常用命令
上篇(http://www.cnblogs.com/yangzhenlong/p/8270835.html)zk伪集群搭建好后,使用zkCli连接zk服务 切换到zk1/bin 目录,执行zkCli. ...
- kindeditor编辑器上传图片
使用的是asp.net MVC 上传图片. 1.下载Kindeditor的对应的包 2.html页面 @{ Layout = null; } <!DOCTYPE html> <htm ...
- 数据库设计理论与实践·<五>常见疑难杂症
- Tomcat清理日志文件无法立即释放磁盘空间
1 自己删除了Tomcat的日志文件,但是依然显示磁盘百分百占用 进入Tomcat目录显示日志已经删除 查询磁盘空间依旧百分百占用 2 自己杀死Tomcat进程然后重启,成功释放空间 3 原因,通过网 ...
- webpack指定第三方模块的查找路径
通常我们会使用一些地方模块在我们的项目中,比如bootstrap import 'bootstrap' 导入的bootstrap默认会查找当前目录的node_modules文件,但是如果这个文件没有, ...
- kafka为何需要High Available
一.为何需要replication kafka0.8以前的版本中,是没有Replication的,一旦某一个Broker宕机,则其上所有的partition数据都不可被消费,这与kafka数据持久性及 ...
- ubuntu 简单安装配置gitlab
安装 gitlab-ce 社区版 依赖 sudo apt-get install curl openssh-server ca-certificates postfix 添加gitlab包服务并安装 ...
- 【blog】SpringBoot普通类中如何获取其他bean例如Service、Dao
自己写工具类 工具类 import org.springframework.beans.BeansException; import org.springframework.context.Appli ...
- MGR架构 ~ 节点的维护相关问题
一简介:MGR节点的相关维护二 两种情况 1 MGR读节点异常停止,然后重新启动加入节点进行数据同步 2 MGR读节点新加入集群成员,启动复制进行数据同步三 通用过程 1 新加入节点通过通道 ...