微信小程序块导航
1.wxml页面
<!--index.wxml-->
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:362rpx" bindchange="bindChange"> <!-- 我是哈哈 -->
<swiper-item>
<view class="page__bd">
<view class="weui-grids">
<block wx:for-items="{{grids}}" wx:key="{{index}}">
<view class="weui-grid" hover-class="weui-grid_active" data-index="{{index}}" data-id="{{0}}" bindtap="click">
<image class="weui-grid__icon" src="../../images/icon_tabbar.png" />
<view class="weui-grid__label">{{'哈哈-' + index}}</view>
</view>
</block>
</view>
</view>
</swiper-item> <!-- 我是呵呵 -->
<swiper-item>
<view class="page__bd">
<view class="weui-grids">
<block wx:for-items="{{grids}}" wx:key="{{index}}">
<view class="weui-grid" hover-class="weui-grid_active" data-index="{{index}}" data-id="{{1}}" bindtap="click">
<image class="weui-grid__icon" src="../../images/icon_tabbar.png" />
<view class="weui-grid__label">{{'呵呵-' + index}}</view>
</view>
</block>
</view>
</view>
</swiper-item> </swiper> <view class="indicator">
<block wx:for="{{swiperList}}">
<view class="swiper_item" style="background-color:{{index == currentTab?'#04b00f':'#aaaaaa'}};"></view>
</block>
</view>
2.js页面
//获取应用实例
var app = getApp() Page({
data: {
currentTab: 0,
grids: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
swiperList:[0, 1, 2, 3, 4]
},
onLoad: function () {
},
click: function (e) {
console.log(e.currentTarget.dataset.id)
console.log(e.currentTarget.dataset.index)
wx.showToast({
title: '第' + e.currentTarget.dataset.id + '栏' + '第' + e.currentTarget.dataset.index + '个',
icon: 'success',
duration: 1500
})
},
/**
* 滑动切换tab
*/
bindChange: function (e) {
console.log(e.detail.current)
this.setData({ currentTab: e.detail.current });
},
})
3.样式wxss页面
/**index.wxss**/ .swiper-box {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
} .swiper-box view {
text-align: center;
} .weui-grids {
border-top: 1rpx solid #d9d9d9;
border-left: 1rpx solid #d9d9d9;
overflow: hidden;
} .weui-grid {
position: relative;
float: left;
padding: 20px 10px;
width: 20%;
box-sizing: border-box;
/*border-right: 1rpx solid #D9D9D9;
border-bottom: 1rpx solid #D9D9D9;*/
} .weui-grid__icon {
display: block;
width: 28px;
height: 28px;
margin: 0 auto;
} .weui-grid__label {
margin-top: 5px;
display: block;
text-align: center;
color: #000;
font-size: 14px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
} .indicator {
width: 100%;
height: 60rpx;
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
background: #eee;
} .swiper_item {
margin: 15rpx 10rpx;
position: relative;
float: left;
width: 30rpx;
height: 30rpx;
border-radius: 50%;
background-color: #aaa;
}
微信小程序块导航的更多相关文章
- 微信小程序-导航 & 路由
微信小程序-导航 & 路由 页面跳转 页面路由 页面栈, 框架以栈的形式维护了当前的所有页面. https://developers.weixin.qq.com/miniprogram/dev ...
- 自定义微信小程序导航(兼容各种手机)
详细代码请见github,请点击地址,其中有原生小程序的实现,也有wepy版本的实现 了解小程序默认导航 如上图所示,微信导航分为两部分,第一个部分为statusBarHeight,刘海屏手机(iPh ...
- 微信小程序——导航栏组件
组件内属性详解 属性 类型 默认值 必填 说明 nav-postion String relative 否 导航栏(包含导航栏以及状态栏)的position,可取值relative.fixed.a ...
- 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...
- 微信小程序------导航栏样式、tabBar导航栏
一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ " ...
- 微信小程序导航栏,下面内容滑动,上册导航栏跟着滑动,内容随着导航栏滑动
16.类似微信导航栏滑动.png 今日头条导航栏,下面滑动上面跟着滑动 index.wxml <swiper class="content" style="heig ...
- 微信小程序 导航(a 连接)自定义组件
导航:navigator 组件 组件上的属性: target:跳到其他小程序( 默认是当前小程序 ),当属性值为 miniProgram 时,跳到别的小程序(如果要跳到别的小程序,需要填写 appid ...
- 微信小程序--导航跟随
最近开发小程序的时候遇到这样一个需求:如图1 页面向下滚动到白色导航的位置时,白色导航固定到页面最上方:当页面向上滚动到白色导航时,白色导航恢复到原始位置:点击各个导航,平滑的跳到相应位置. 思路1: ...
- 微信小程序---导航
1.wx.navigateTo(OBJECT):保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navigateTo({ url: 'test?id= ...
随机推荐
- Markdown语法,及其在typora中的快捷键,学写博客吧!!!
前言 Markdown (MD) 是现在最流行的一种文档书写语言格式.平常写笔记,写博客,写计划再好不过了.个人觉得使用很简单,右击鼠标,有你想要的操作. Typora是简洁.操作简单.功能强大.方便 ...
- oracle数据泵导入导出部分用户
问题描述:需要将140服务器中的tbomnew实例下的部分用户导入到118服务器下的tbompx实例中,本次导入导出的两个数据库均为19C 部分用户名:CORE,MSTDATA,BOMMGMT,CFG ...
- opencv —— getRotationMatrix2D、warpAffine 仿射变换实现图像旋转缩放
仿射变换的基本概念 仿射变换是一种二维坐标(x, y)到二维坐标(u, v)的线性变换,其数学表达式形式如下: 对应的齐次坐标矩阵表示形式为: 仿射变换保持了二维图形的“平直性”(直线经仿射变换后依然 ...
- 解决session共享问题
方法一 使用Nginx让它绑定ip(没有共享所以就没有共享问题了) 配置Nginx upstream backserver { ip_hash; server localhost:8080; serv ...
- js内置对象的常用属性和方法(Array | String | Date | Math)
js内置对象:Array String Math Date <!DOCTYPE html> <html lang="en"> <head> ...
- 数据库中间件DBLE学习(二) 学习配置schema.xml
前言 一边有一个经常引诱我让我"娱乐至死"的视频,还有一个不停"鞭策"我让我快点学习的大BOSS.正是有这两种极端的爱才让我常常在自信中明白自己努力的方向.嗯, ...
- 【python基础语法】字符串常用方法 、列表(第3天课堂笔记)
""" 字符串的方法 join 字符串拼接,将列表转换为字符串 find 查找元素位置 count 查找元素个数 replace 替换字符 split 字符串分割,将字符 ...
- 第3章 关系数据库标准语言SQL(重点) | 数据库知识点整理
第3章 关系数据库标准语言SQL(重点) 了解 SQL语言发展过程 关系数据库技术和关系数据库管理系统RDBMS产品的发展过程 掌握 SQL语言的特点和优点 面向过程的语言和SQL语言的区别 关系数据 ...
- gdck01
有好几年 好几年 好几年 我成天在抱怨 我没钱 我没钱 恨老天不开眼 不开眼 不开眼 为什么好的事 都跟我没有缘
- PHP0009:PHP基础-mysql
以管理员省份启动记事本 修改host文件 插入外部sql数据