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 ...
随机推荐
- zookeeper的作用
1.管理(存储和读取)程序提交的状态数据 2.为用户程序提供数据节点监听服务
- 十八、Linux 进程与信号---进程介绍
18.1 进程的概念 程序:程序(program)是存放再磁盘文件中的可执行文件 进程 程序的执行实例被称为进程(process) 一个程序的执行实例可能由多个 进程具有独立的权限和职责.如果系统中某 ...
- pyqt5-控件是否可用
setEnabled(bool) 设置控件是否可用 True 可用 isEnabled() 获取控件是否可用 s=button.isEnabled()
- rem和em学习笔记及CSS预处理(未完待续)
以下为读http://www.w3cplus.com/css/when-to-use-em-vs-rem.html的感悟,收获满满! 1.当元素A的字体单位是n rem时,它将根据根元素(html)的 ...
- Chain训练准则的计算
轮迭代时验证集的日志: log/compute_prob_valid.1000.log: LOG (nnet3-chain-compute-prob[5.5.100-d66be]:PrintTotal ...
- 【译】第三篇 SQL Server安全主体和安全对象
本篇文章是SQL Server安全系列的第三篇,详细内容请参考原文. 一般来说,你通过给主体分配对象的权限来实现SQL Server上的用户与对象的安全.在这一系列,你会学习在SQL Server实例 ...
- 表单相关标签之input标签
用于搜集用户信息. <input type="text" name="fname" /> 标签属性 type 规定 input 元素的类型.输入字段 ...
- mkyaffs2image 生成不了120M的镜像文件的解决方法
下载链接: http://download.csdn.net/download/macrocrazier/3807761 用上述下载的链接会出现Failed to execute /linuxrc ...
- react-踩坑记录——iconfont
选取图标,添加至购物车后,下载代码. 后将下载了的文件夹改名,放入css文件夹中.在组件中使用到的时候按路径引入“iconfont.css”文件即可. 使用
- #6284. 数列分块入门 8(区间询问等于一个数 cc 的元素,并将这个区间的所有元素改为 c)
题目链接:https://loj.ac/problem/6284 题目大意:中文题目 具体思路:还是和sqrt那个题的思路相同的,标记每一块的值是不是相同的,注意lazy下标的下放. AC代码: #i ...