实现代码如下: 
wxml页面

<scroll-view scroll-x="true" class="weui-navbar">
<block wx:for-items="{{tabs}}">
<view id="{{index}}" class="{{activeIndex == index ?'item_on':''}} default-item" bindtap="tabClick" style="width:{{tabW}}px">
{{item}}
</view>
</block>
<view class="weui-navbar-slider" style="transform:translateX({{slideOffset}}px);"></view>
</scroll-view>
<view class="rec" />
<swiper current="{{activeIndex}}" class="swiper-box" duration="100" bindchange="bindChange">
<swiper-item class="swiper-item">
<view class="slide-view">tab0</view>
</swiper-item>
<swiper-item class="swiper-item">
<view class="slide-view">tab1</view>
</swiper-item>
<swiper-item class="swiper-item">
<view class="slide-view">tab2</view>
</swiper-item>
<swiper-item class="swiper-item">
<view class="slide-view">tab3</view>
</swiper-item>
<swiper-item class="swiper-item">
<view class="slide-view">tab4</view>
</swiper-item>
<swiper-item class="swiper-item">
<view class="slide-view">tab5</view>
</swiper-item>
<swiper-item class="swiper-item">
<view class="slide-view">tab6</view>
</swiper-item>
</swiper>

wxss样式:

page {
height: 100%;
}
view , scroll-view{
padding: 0px;
margin: 0px;
}
.weui-navbar{
width: 100%;
position: fixed;
border-bottom: 1px solid #00bba1;
box-sizing: border-box;
white-space: nowrap;
z-index: 100;
background: white;
}
.rec{
width: 100%;
height: 7%;
}
.weui-navbar .default-item{
/*width:25%;*/
display: inline-block;
text-align: center;
font-size: 32rpx;
box-sizing: border-box;
height: 7%;
padding-bottom: 20rpx;
}
.weui-navbar .item_on{
color: #00bba1;
}
.weui-navbar-slider{
position: absolute;
width: 160rpx;
height: 2px;
content:"";
background: #00bba1;
bottom: 0px;
left: 12.5rpx;
transition: transform .3s;
}
.swiper-box{
height: 900px;
border-bottom: 1px solid #d1d1d1;
}
.swiper-box .swiper-item{
text-align: center;
padding-top: 200rpx;
height: 100%;
}

//index.js
//获取应用实例
var app = getApp();
var mtabW;
Page({
data: {
tabs:["综合与绘画","艺术喷漆","泥塑","纸面绘画","布面绘画","中国油画","水墨画"],
activeIndex:0,
slideOffset:0,
tabW:0
},
//事件处理函数
onLoad: function () {
var that = this;
wx.getSystemInfo({
success: function (res) {
mtabW = res.windowWidth / 4; //设置tab的宽度
that.setData({
tabW:mtabW
})
}
});

},
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
tabClick:function(e){
var that = this;
var idIndex = e.currentTarget.id;
var offsetW = e.currentTarget.offsetLeft; //2种方法获取距离文档左边有多少距离
this.setData({
activeIndex:idIndex,
slideOffset:offsetW
});
},
bindChange:function(e){
var current = e.detail.current;
if((current+1)%4 == 0){

}
var offsetW = current * mtabW; //2种方法获取距离文档左边有多少距离
this.setData({
activeIndex:current,
slideOffset:offsetW
});

}

})

---------------------
作者:花生地瓜
来源:CSDN
原文:https://blog.csdn.net/u013018357/article/details/64922923

小程序写tab和swiper切换结合效果的更多相关文章

  1. 微信小程序写tab切换

    微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view ...

  2. 微信小程序 写音乐播放器 slider组件 将value设置为0 真机测试滑块不能回到起点

    最近在用微信小程序写一个音频播放页面,做时间进度的时候用到了slider插件,但是在自然播放完成,或者上/下切换的时候,将slider的value属性值设为0,开发工具上滑块会回到起点,有效.但是真机 ...

  3. 微信小程序滚动tab的实现

    微信小程序滚动tab的实现 1.目的:为了解决滚动版本的tab,以及实现虹吸效果. 2.方案:自己动手写了一个Demo,用于测试实现如上的效果.其代码有做参考,在这里先声明.具体的参照如下:重庆大学二 ...

  4. 小程序之 tab切换(选项卡)

    好久没有写东西了   今天写一个简单的东西 小程序tab切换 (选项卡功能) .wxml <view class="swiper-tab"> <view < ...

  5. 小程序之Tab切换(二)

    之前写的那个Tab切换是常规逻辑写的,接下来我会列出小程序api自带的写法,当然了 这个写法更加简单,实用.我们只需要配置app.json这个文件即可. 先看效果图: app.json代码:(有木有感 ...

  6. 微信小程序滚动Tab选项卡:左右可滑动切换

    最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当 ...

  7. 小程序之Tab切换

    小程序越来越火了,作为一名,额  有理想的攻城狮,当然要紧跟互联网时代的步伐啦,于是我赶紧抽时间学习了一下小程序的开发,顺便把经验分享给大家. 对于申请账号以及安装开发工具等,大家可以看官网:http ...

  8. 微信小程序-滚动Tab选项卡

    前言:今天呢 给大家详细讲解一下滚动Tab选项卡:左右可滑动切换的效果,希望对大家做项目时候有用! 以前也遇到过这个,但是没有做记录.转载来源于:https://www.jianshu.com/p/9 ...

  9. 小程序组件-swipe多页切换,并支持下拉刷新,上拉加载,menu动态联动切换

    前言 最近一个小程序项目中遇到一个需求,就是实现类似资讯类app的多页面切换的那种效果, 如下图: 最终效果: 1.功能分析 首先实现这个功能分为三步: 实现顶部menu菜单 实现多页面滑动切换 支持 ...

随机推荐

  1. Android fragment (二)

    怎样使用fragment? 1.首先你要确定下你有多少个fragment要使用在一个activity里. 2.依据你的fragment的数量,创建继承自fragment的class.然后依据实际需求重 ...

  2. Nginx https免费SSL证书配置指南

    生成证书 $ cd /usr/local/nginx/conf $ openssl genrsa -des3 -out server.key 1024 $ openssl req -new -key  ...

  3. Android 开源项目精选

    0x00  leakcanary [内存泄漏检测] Leakcanary : A memory leak detection library for Android and Java. 良心企业Squ ...

  4. 扒一扒P2P风控的底牌(转)

    互联网金融,这里面水就太深了,能当理财买的一般有两类,一个是货币基金,比如余额宝,这个大家已经十分清楚了,没什么风险, 但问题就是收益越来越低.实在是不过瘾了.而另外一种就是P2P理财了,收益很高,也 ...

  5. 爬虫学习一系列:urllib2抓取网页内容

    爬虫学习一系列:urllib2抓取网页内容 所谓网页抓取,就是把URL地址中指定的网络资源从网络中读取出来,保存到本地.我们平时在浏览器中通过网址浏览网页,只不过我们看到的是解析过的页面效果,而通过程 ...

  6. 抽钻石vs中奖门 概率问题

    在概率问题中,假设跟着日常经验与感觉走.常常会得到错误的答案.以下"抽钻石"的故事非常可以说明这一点. 题目一:某天电视台举办了这种一个游戏节目.主持人首先拿出三个盒子.已知这三个 ...

  7. JS常用方法手记

    1.判断arr数组是否含有元素str,没有返回-1 arr.indexOf(str) 2.遍历arr数组,k为键,v为值 arr.map((v, k) => { return;}) 3.arr数 ...

  8. nstall-Package : 无法找到程序包“MySql.Data.Entity.EF6”

    在vs2013中用MySQL+EF6时,会遇到版本的问题,解决方法一般如下: 1 Install-Package EntityFramework -Version 6.0.0然后Enter2 Inst ...

  9. hunnu--11548--找啊找啊找朋友

    找啊找啊找朋友 Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit users: 14,  ...

  10. CPU接口练习 (仅以此程序证明 某个同学真的有毒!有毒!!!)

    1创建接口 package lianxi; public interface ICpu { public boolean neiCun();//内存接口 } 2创建一个类 连接这个接口 package ...