<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. 哪些领域适合开发微信小程序

    什么是小程序?小程序的实质就是webapp,最典型的案例是接入微信的“滴滴打车”.虽然没有下载安装APP,但通过微信完全可以正常使用滴滴打车的服务,需要的定位.支付等底层能力,微信都可以提供. 张小龙 ...

  2. ****** 二十八 ******、软设笔记【数据库】-分布式数据库、特点、数据存储、DBMS组成

    分布式数据库    一.分布式数据库        分布式数据库由一组数据组成,这些数据物理上分布在计算机网络的不同结点(场地)上,逻辑上是属于同一个系统.每个结点可以执行局部应用,也能通过网络通信子 ...

  3. 使用Verilog HDL语言注意事项

    1.wire和reg区别,输入输出是wire型,表示硬件线的连接,要在always模块里被赋值需要中间reg型变量,两者通过: assign 输入/输出=reg型中间变量 2.case的default ...

  4. CDH安装报错 Monitor-HostMonitor throttling_logger ERROR ntpq: ntpq -np: not synchronized to any server

    1 没有安装ntp同步服务 所有机器统一时区,确认所有机器配置一致  vim /etc/sysconfig/clock ntp服务器配置 ln -sf /usr/share/zoneinfo/Asia ...

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

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

  6. 省市联动-获取资源文件xml 获取nodes的方法要学会

    try { SAXReader reader = new SAXReader(); InputStream input = this.getClass().getResourceAsStream(&q ...

  7. 域scope 介绍,及查找数据

    书中介绍<jsp:useBean> 中属性 scope:   <%@ page language="java" pageEncoding="UTF-8& ...

  8. Java开发环境配置(5)--Web 服务器--Tomcat--安装过程遇到的问题

    1.参考例子:--- 怎样安装配置tomcat 8_百度经验https://jingyan.baidu.com/article/ff42efa91132a0c19e220208.html 安装与配置T ...

  9. Java类加载双亲委托模式优点

    启动类加载器可以抢在标准扩展类加载器之前去装载类,而标准扩展类装载器可以抢在类路径加载器之前去加载那个类,类路径装载器又可以抢在自定义类装载器之前去加载类.所以Java虚拟机先从最可信的Java核心A ...

  10. Css - 精灵图

    Css - 精灵图css sprite 一个页面文档上总是会有N多的图标小图片,它们都是以背景图的方式嵌入文档,每个小图片需要一个url的css属性,每个url都指向一个服务器地址的链接,每个链接都代 ...