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;
}

微信小程序块导航的更多相关文章

  1. 微信小程序-导航 & 路由

    微信小程序-导航 & 路由 页面跳转 页面路由 页面栈, 框架以栈的形式维护了当前的所有页面. https://developers.weixin.qq.com/miniprogram/dev ...

  2. 自定义微信小程序导航(兼容各种手机)

    详细代码请见github,请点击地址,其中有原生小程序的实现,也有wepy版本的实现 了解小程序默认导航 如上图所示,微信导航分为两部分,第一个部分为statusBarHeight,刘海屏手机(iPh ...

  3. 微信小程序——导航栏组件

    组件内属性详解   属性 类型 默认值 必填 说明 nav-postion String relative 否 导航栏(包含导航栏以及状态栏)的position,可取值relative.fixed.a ...

  4. 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...

  5. 微信小程序------导航栏样式、tabBar导航栏

    一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ " ...

  6. 微信小程序导航栏,下面内容滑动,上册导航栏跟着滑动,内容随着导航栏滑动

    16.类似微信导航栏滑动.png 今日头条导航栏,下面滑动上面跟着滑动 index.wxml <swiper class="content" style="heig ...

  7. 微信小程序 导航(a 连接)自定义组件

    导航:navigator 组件 组件上的属性: target:跳到其他小程序( 默认是当前小程序 ),当属性值为 miniProgram 时,跳到别的小程序(如果要跳到别的小程序,需要填写 appid ...

  8. 微信小程序--导航跟随

    最近开发小程序的时候遇到这样一个需求:如图1 页面向下滚动到白色导航的位置时,白色导航固定到页面最上方:当页面向上滚动到白色导航时,白色导航恢复到原始位置:点击各个导航,平滑的跳到相应位置. 思路1: ...

  9. 微信小程序---导航

    1.wx.navigateTo(OBJECT):保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navigateTo({ url: 'test?id= ...

随机推荐

  1. Markdown语法,及其在typora中的快捷键,学写博客吧!!!

    前言 Markdown (MD) 是现在最流行的一种文档书写语言格式.平常写笔记,写博客,写计划再好不过了.个人觉得使用很简单,右击鼠标,有你想要的操作. Typora是简洁.操作简单.功能强大.方便 ...

  2. oracle数据泵导入导出部分用户

    问题描述:需要将140服务器中的tbomnew实例下的部分用户导入到118服务器下的tbompx实例中,本次导入导出的两个数据库均为19C 部分用户名:CORE,MSTDATA,BOMMGMT,CFG ...

  3. opencv —— getRotationMatrix2D、warpAffine 仿射变换实现图像旋转缩放

    仿射变换的基本概念 仿射变换是一种二维坐标(x, y)到二维坐标(u, v)的线性变换,其数学表达式形式如下: 对应的齐次坐标矩阵表示形式为: 仿射变换保持了二维图形的“平直性”(直线经仿射变换后依然 ...

  4. 解决session共享问题

    方法一 使用Nginx让它绑定ip(没有共享所以就没有共享问题了) 配置Nginx upstream backserver { ip_hash; server localhost:8080; serv ...

  5. js内置对象的常用属性和方法(Array | String | Date | Math)

    js内置对象:Array  String  Math  Date <!DOCTYPE html> <html lang="en"> <head> ...

  6. 数据库中间件DBLE学习(二) 学习配置schema.xml

    前言 一边有一个经常引诱我让我"娱乐至死"的视频,还有一个不停"鞭策"我让我快点学习的大BOSS.正是有这两种极端的爱才让我常常在自信中明白自己努力的方向.嗯, ...

  7. 【python基础语法】字符串常用方法 、列表(第3天课堂笔记)

    """ 字符串的方法 join 字符串拼接,将列表转换为字符串 find 查找元素位置 count 查找元素个数 replace 替换字符 split 字符串分割,将字符 ...

  8. 第3章 关系数据库标准语言SQL(重点) | 数据库知识点整理

    第3章 关系数据库标准语言SQL(重点) 了解 SQL语言发展过程 关系数据库技术和关系数据库管理系统RDBMS产品的发展过程 掌握 SQL语言的特点和优点 面向过程的语言和SQL语言的区别 关系数据 ...

  9. gdck01

    有好几年 好几年 好几年 我成天在抱怨 我没钱 我没钱 恨老天不开眼 不开眼 不开眼 为什么好的事 都跟我没有缘

  10. PHP0009:PHP基础-mysql

    以管理员省份启动记事本 修改host文件 插入外部sql数据