<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切换的更多相关文章

  1. 微信小程序开发基础知识总结

    微信小程序在无论在功能.文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破H5页面应用的限制,更加接近原生程序的功能,因此微信小程序具有很 ...

  2. oracle创建Javasource实现数据库备份

    因客户需求,需要在业务系统中,菜单中的网页中的按钮中加入一个按钮,用于点击备份数据库 (环境:只配置了数据源连接oralce ,应用服务器和数据服务器不在一台机器,且数据库机器oracle操作系统账号 ...

  3. 实现自定义的小程序底部tabbar

    背景 诶,当然是为了实现更有温度的代码啦(背后设计师拿着刀对着我) 自带tabbar app.json中配置: tabBar: { backgroundColor: '#fff', borderSty ...

  4. 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab

    解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...

  5. 微信小程序标签页切换

    WXML中: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab== ...

  6. 微信小程序--问题汇总及详解之tab切换

    设置背景颜色就直接在page里设置    page {background-color: rgb(242, 242, 242);} tab切换: navigator 页面链接 传参的格式为url=&q ...

  7. weui tabbar 切换

    Html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...

  8. weui 多网页切换效果分析

    weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...

  9. 微信小程序小技巧系列《一》幻灯片,tab导航切换

    作者:gou-tian 来自:github 幻灯片 使用微信小程序原生组件swiper实现. <swiper indicator-dots="{{indicatorDots}}&quo ...

随机推荐

  1. spring注解第02课 包扫描@ComponentScan、@ComponentScans

    1.配置文件形式: <context:component-scan base-package="com.atguigu" /> spring会扫描此包下的@Servic ...

  2. 关于JSON CSRF的一些思考

    CSRF作为常见漏洞,一直受到关注和研究,JSON是一种应用广泛的轻量级数据交换格式,当CSRF去POST一段JSON,情况可能会变得有些不一样:此次就一种特殊情况下的CSRF进行分析,权当抛砖引玉. ...

  3. 【LeetCode】134.Gas Station

    Problem: There are N gas stations along a circular route, where the amount of gas at station i is ga ...

  4. 牛客 被3整除的子序列dp

    题意很清楚,直接dp即可,dp[i][j]表示到第i个字符的状态为j的方案数,这里状态指的是子序列最大下标到第i直接dp即可,dp[i][j]表示到第i个字符的状态为j的方案数,这里状态指的是子序列最 ...

  5. 【Vue】中 $attrs 中的使用方法

    vue官网是这样介绍的: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外).当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 ( ...

  6. Java基础_0308:String类的常用方法

    取出指定索引的字符 -- 使用charAt()方法 public class StringDemo { public static void main(String args[]) { String ...

  7. HDFS笔记(二)

    fsimage : NameNode启动时,对文件系统的快照 eidt logs : NameNode启动后,对文件系统的改动序列 namenode在全局里就一个进程,所以存在单点问题 DataNod ...

  8. Python 14 Html 基础

    内容概要 html静态页面,标签介绍 HTML简述 定义: HTML,超文本标记语言,写给浏览器的语言,目前网络上应用最广泛的语言.HTML也在不断的更新,最新版本已经出现了HTML5.在HTML5中 ...

  9. tomcat源码之connector启动过程

    connector源码部分 构造函数 生命周期启动 启动endPoint 启动accepter 线程执行方法 SocketProcessor启动

  10. Path for IClasspathEntry must be absolute:

    关掉eclipse, 删除workspace工作目录下面的.metadata文件,看不到.metadata文件就 "ctril + H" 就可以看到了.然后重新打开eclipse, ...