<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. IntelliJ IDEA 创建Web项目(全教程)

    说明:IntelliJ IDEA 版本为14.JDK 版本为1.7tomcat 版本为apache-tomcat-7.0.70 注:在创建过程中注意相关软件版本位数的问题.32位,64位的软件混搭会导 ...

  2. Javascript面向对象特性实现封装、继承、接口详细案例

    Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...

  3. oracle查看表空间数据文件使用情况

    -- 查看表空间数据文件使用情况 select a.*, round(a.usedgb/a.maxgb*100) || '%' usedPer from ( select t.TABLESPACE_N ...

  4. 第27月第6天 gcd timer

    1.gcd timer 因为如果不用GCD,编码需要注意以下三个细节: 1.必须保证有一个活跃的runloop. performSelector和scheduledTimerWithTimeInter ...

  5. Java Map在遍历过程中删除元素

    Java中的Map如果在遍历过程中要删除元素,除非通过迭代器自己的remove()方法,否则就会导致抛出ConcurrentModificationException异常.JDK文档中是这么描述的: ...

  6. MySql数据库学习笔记(3)

    查看默认事务隔离级别 mysql> select @@tx_isolation; mysql> select @@global.tx_isolation; mysql> select ...

  7. 【译】第一篇 SQL Server安全概述

    本篇文章是SQL Server安全系列的第一篇,详细内容请参考原文. Relational databases are used in an amazing variety of applicatio ...

  8. mysql案例~非常规操作汇总

    一 简介:此文汇总mysql不常见的数据库的操作二 mysql表修改最大自增ID 目的: 修复canal相关问题 语法: alter table a AUTO_INCREMENT=num; 执行速度: ...

  9. 嵌入式开发平台迅为iTOP-4412开发板-ssh常见问题以及解决方法

    一.基本网络,软件安装以及配置 ssh 软件无法登陆 Ubuntu,有可能是网络不通.SSH 软件未安装.环境变量没配置.防 火墙未关闭等. 1. 网络连接 使用 ssh 传输文件的前提是网络顺畅,即 ...

  10. java的引用

    一.值类型与引用类型 1.变量初始化 int num = 10; String str = "hello"; num是int基本类型变量,值就直接保存在变量中.str是String ...