写点东西记录一下美好时光,上周学习了一下通过mpuve开发微信小程序,看完文档,就准备撸起袖子加油干的时候,一开始就被支持手势滑动的导航栏给搞懵逼了。求助一波百度和谷歌未果后,只能自己动脑动手!为了给像我一样的小菜鸟,提供一下思路,就记录一下吧!可以优化的地方,请大神不吝赐教。

1.mpvue是什么?

额,这个还是直接看文档:mpvue 官方站点

2.效果预览

不耽误大神时间,没什么亮点,直接上效果图,有兴趣再往下看吧!一切从简。简陋的demo.

3.实战过程

创建示例项目

vue init mpvue/mpvue-quickstart slidebar

先来实现一个TabBar吧,思路和我们平时webTab页是一样,监听点击事件,来回切换。css3动画效果来实现底部滚动条的来回切换。

修改pages/index/index.vuetemplate

<template>
<div>
<div class="navbar">
<block v-for="(item,index) in tabs" :key="index">
<div :id="index" :class="{'navbar_item_on':activeIndex == index}" class="navbar_item" @click="tabClick">
<div class="navbar_title">{{item.name}}</div>
</div>
</block>
<div class="navbar_slider" :class="navbarSliderClass"></div>
</div>
<div>
<div :hidden="activeIndex != 0">选项一的内容</div>
<div :hidden="activeIndex != 1">选项二的内容</div>
<div :hidden="activeIndex != 2">选项三的内容</div>
</div>
</div>
</template>

修改pages/index/index.vuescript

<script>
export default {
data() {
return {
tabs: [
{
name: "选项卡1",
type: "1",
checked: true
},
{
name: "选项卡2",
type: "2",
checked: true
},
{
name: "选项卡3",
type: "3",
checked: true
}
],
activeIndex: 0,
};
},
computed: {
navbarSliderClass() {
if (this.activeIndex == 0) {
return "navbar_slider_0";
}
if (this.activeIndex == 1) {
return "navbar_slider_1";
}
if (this.activeIndex == 2) {
return "navbar_slider_2";
}
},
},
methods: {
tabClick(e) {
this.activeIndex = e.currentTarget.id;
}
},
};
</script>

添加样式:

<style scoped>
.content {
box-sizing: border-box;
height: 100%;
padding-top: 50px;
/* overflow: auto; */
-webkit-overflow-scrolling: touch;
} .swiper-item {
height: 100%;
text-align: center;
} .navbar {
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: fixed;
z-index: 500;
top: 0;
height: 50px;
width: 100%;
background-color: #298de5;
border-bottom: 1rpx solid #ccc;
} .navbar_item {
position: relative;
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
padding: 13px 0;
text-align: center;
font-size: 0;
} .navbar_item .navbar_item_on {
color: white;
} .navbar_title {
color: white;
font-weight: 500;
display: inline-block;
font-size: 15px;
max-width: 8em;
width: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
} .navbar_slider {
position: absolute;
content: " ";
left: 0;
bottom: 0;
width: 6em;
height: 3px;
background-color: white;
-webkit-transition: -webkit-transform 0.1s;
transition: -webkit-transform 0.1s;
transition: transform 0.1s;
transition: transform 0.1s, -webkit-transform 0.1s;
} .navbar_slider_0 {
left: 29rpx;
transform: translateX(0);
} .navbar_slider_1 {
left: 29rpx;
transform: translateX(250rpx);
} .navbar_slider_2 {
left: 29rpx;
transform: translateX(500rpx);
}
.controls {
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: fixed;
z-index: 8888;
top: 80;
height: 50px;
width: 100%;
background-color: #298de5;
}
</style>

样式是从mp-vue提取出来的,通过tabClick()方法动态更改当前tabbar选中值,然后通过navbarSliderClass()的滑动底部的滚动条。来看下效果吧!

Tabbar添加手势滑动,接下来改造一下吧,添加手势滑动效果,需要借助小程序的swiper组件来实现。

修改pages/index/index.Vue下的template:

<template>
<div>
<div class="navbar">
<block v-for="(item,index) in tabs" :key="index">
<div :id="index" :class="{'navbar_item_on':activeIndex == index}" class="navbar_item" @click="tabClick">
<div class="navbar_title">{{item.name}}</div>
</div>
</block>
<div class="navbar_slider" :class="navbarSliderClass"></div>
</div>
<swiper class="content" :duration="50" :style="'height:'+contentHeight" @change="swiperChange" :current="currentTab" @animationfinish="onAnimationfinish">
<swiper-item v-for="(item,index) in tabs" :key="index">
<div>{{item.name}}</div>
</swiper-item>
</swiper>
</div>
</template>

修改Script:

<script>
export default {
data() {
return {
tabs: [
{
name: "选项卡1",
type: "1",
checked: true
},
{
name: "选项卡2",
type: "2",
checked: true
},
{
name: "选项卡3",
type: "3",
checked: true
}
],
activeIndex: 0,
currentTab: 0,
winWidth: 0,
winHeight: 0,
};
},
computed: {
navbarSliderClass() {
if (this.activeIndex == 0) {
return "navbar_slider_0";
}
if (this.activeIndex == 1) {
return "navbar_slider_1";
}
if (this.activeIndex == 2) {
return "navbar_slider_2";
}
},
contentHeight() {
return this.winHeight + "px";
}
},
methods: {
tabClick(e) {
this.activeIndex = e.currentTarget.id;
this.currentTab =this.activeIndex;
},
swiperChange(e) {
this.currentTab = e.mp.detail.current;
this.activeIndex = this.currentTab;
},
onAnimationfinish() {
console.log("滑动完成.....")
}
},
onLoad() {
var res = wx.getSystemInfoSync();
this.winWidth = res.windowWidth;
this.winHeight = res.windowHeight;
}
};
</script>

好了,到这里就全部完成了。注意swiper组件必须给他设置一个固定高度,不可以使用height:100%之类的。可以在swiper里嵌套scroll-view实现列表.不过长列表左右滑动有卡顿,暂未知道该如何优化。

mpvue实战-手势滑动导航栏的更多相关文章

  1. 在UWP中页面滑动导航栏置顶

    最近在研究掌上英雄联盟,主要是用来给自己看新闻,顺便copy个界面改一下段位装装逼,可是在我copy的时候发现这个东西 当你滑动到一定距离的时候导航栏会置顶不动,这个特性在微博和淘宝都有,我看了@ms ...

  2. Bootstrap 学习笔记 项目实战 响应式导航栏

    导航代码HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  3. 04-Flutter移动电商实战-打通底部导航栏

    关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...

  4. html5 横向滑动导航栏

    前提 需要引入: <script src="../assets/js/iscroll.js"></script> v4.2版本 ####html <! ...

  5. js滑动导航栏点击后居中效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jquery 实现导航栏滑动效果

    精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...

  7. 【Andord真】SlideMenu+ViewPagerIndictor双滑动边栏+滑动导航条

    采取SlideMenu达到的效果侧边栏: 间 setContentView是设置主背景的布局 setBehindContentView是设置左边菜单的布局 setSecondaryMenu是设置右边的 ...

  8. css3制作炫酷导航栏效果

    今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...

  9. iOS渐变导航栏封装

    由于最近开发的几个项目都有渐变导航栏,每次写的时候都要copy一堆关于导航渐变相关的代码,显得类很冗余,所以花了点时间封装了一个渐变类,直接继承就可以满足大部分需求啦,这里简单写一下心路历程: 渐变的 ...

随机推荐

  1. 使用turtle库画国际象棋棋盘

    import turtle n = 60 # 每行间隔,小格子边长 x = -300 # x初始值 y = -300 # x初始值 def main(): turtle.speed(11) turtl ...

  2. (Java实现) 洛谷 P1042 乒乓球

    题目背景 国际乒联现在主席沙拉拉自从上任以来就立志于推行一系列改革,以推动乒乓球运动在全球的普及.其中1111分制改革引起了很大的争议,有一部分球员因为无法适应新规则只能选择退役.华华就是其中一位,他 ...

  3. (Java实现) 数塔问题

    数塔问题(使用动态规划思路求解) 如图所示,给定一个正整数构成的三角形,如下所示: 在下面的数字三角形中寻找一条从顶部到底边的路径, 使得路径上所经过的数字之和最大. 路径上的每一步都只能往左下或者右 ...

  4. Java实现 蓝桥杯 算法训练 p1103

    算法训练 P1103 时间限制:1.0s 内存限制:256.0MB 编程实现两个复数的运算.设有两个复数 和 ,则他们的运算公式为: 要求:(1)定义一个结构体类型来描述复数. (2)复数之间的加法. ...

  5. Java实现 蓝桥杯VIP 算法训练 递归求二进制表示位数

    问题描述 给定一个十进制整数,返回其对应的二进制数的位数.例如,输入十进制数9,其对应的二进制数是1001,因此位数是4. 样例输入 一个满足题目要求的输入范例. 9 样例输出 与上面的样例输入对应的 ...

  6. Java实现欧拉筛与花里胡哨求质数高级大法的对比

    我也不清楚这是什么高级算法,欧拉筛是昨天有位大佬,半夜无意间告诉我的 欧拉筛: 主要的含义就是我把这个数的所有倍数都弄出来,然后下次循环的时候直接就可以跳过了 import java.text.Sim ...

  7. Java实现 LeetCode 32 最长有效括号

    32. 最长有效括号 给定一个只包含 '(' 和 ')' 的字符串,找出最长的包含有效括号的子串的长度. 示例 1: 输入: "(()" 输出: 2 解释: 最长有效括号子串为 & ...

  8. @Ajax.ActionLink跳转页面的问题解决方案 MVC Ajax不支持问题

    [JavaScriptResult]在客户端执行服务器返回的JavaScript代码当一个内置的Ajax辅助方法请求一个操作方法,该方法会返回一个在客户端执行立即的脚本. public ActionR ...

  9. git提交代码托管平台流程

    首先先安装git git官网 ---- https://git-scm.com/ 下载好傻瓜式安装即可 安装好过后,再桌面任意空白区域右键,看到以下两个选项即为安装成功 一般都用第二个选项也就是 Gi ...

  10. 8000字长文让你彻底了解 Java 8 的 Lambda、函数式接口、Stream 用法和原理

    我是风筝,公众号「古时的风筝」.一个兼具深度与广度的程序员鼓励师,一个本打算写诗却写起了代码的田园码农! 文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在 ...