微信小程序使用swiper制作左右滑动tabs导航

首先我们先来看一下效果吧

很简单

wxml

<!-- 组合按钮导航 S --><swiper class="tabs-nav"><swiper-item wx:for="{{tabs}}" wx:key="index"><view class="navigation"><block wx:for="{{tabs[index]}}" wx:key="num" bindtap="signInShow"><view class="nav-bottom" data-index="{{index}}" bindtap="chooseMenu"><image class="nav-icon" src="{{item.tabBtn}}"></image><text class="navigation-size" data-title="{{item.title}}">{{item.title}}</text></view></block></view><!-- 按钮导航 E --></swiper-item></swiper><!-- 组合按钮导航 E -->

wxss

/* tabs-nav */
.tabs-nav {width: 100%; height: 442rpx;background: #ffffff;border-radius: 10rpx;
}
.navigation {padding: 44rpx 15rpx 2rpx;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-around;
}
.navigation .nav-bottom {margin-bottom: 42rpx;display: flex;flex-direction: column;align-items: center;width: 120rpx;
}
.nav-icon {width:100rpx; height:100rpx
}
.navigation .navigation-size {font-size: 35rpx;margin-top: 16rpx;color: #000
}

最后一部分,js,主要看数据结构

tabs: [[{title: "体验",tabBtn: "../../img/tabs/tabs_1.png"},{title: "秒杀",tabBtn: "../../img/tabs/tabs_2.png"},{title: "兑换",tabBtn: "../../img/tabs/tabs_3.png"},{title: "拼团",tabBtn: "../../img/tabs/tabs_4.png"},{title: "乐购",tabBtn: "../../img/tabs/tabs_5.png"},{title: "签到",tabBtn: "../../img/tabs/tabs_6.png"},{title: "店铺街",tabBtn: "../../img/tabs/tabs_7.png"},{title: "社区",tabBtn: "../../img/tabs/tabs_8.png"},{title: "星球",tabBtn: "../../img/tabs/tabs_9.png"},{title: "邀请",tabBtn: "../../img/tabs/tabs_10.png"}],[{title: "体验",tabBtn: "../../img/tabs/tabs_1.png"},{title: "秒杀",tabBtn: "../../img/tabs/tabs_2.png"},{title: "兑换",tabBtn: "../../img/tabs/tabs_3.png"},{title: "拼团",tabBtn: "../../img/tabs/tabs_4.png"},{title: "乐购",tabBtn: "../../img/tabs/tabs_5.png"},{title: "签到",tabBtn: "../../img/tabs/tabs_6.png"},{title: "店铺街",tabBtn: "../../img/tabs/tabs_7.png"},{title: "社区",tabBtn: "../../img/tabs/tabs_8.png"},{title: "星球",tabBtn: "../../img/tabs/tabs_9.png"},{title: "邀请",tabBtn: "../../img/tabs/tabs_10.png"}]],

以上就是效果的所有代码

最后加上点击事件吧

// 按钮菜单点击chooseMenu: function(e) {var index = e.currentTarget.dataset.index;if (index == 0) {wx.navigateTo({url: '../commodity/commodity-experience-list/index',})}if (index == 1) {wx.navigateTo({url: '../commodity/commodity-tesco-list/index',})}if (index == 2) {wx.navigateTo({url: '../commodity/commodity-exchange-list/index',})}if (index == 3) {wx.navigateTo({url: '../commodity/commodity-time-limit/index',})}if (index == 4) {wx.navigateTo({url: '../commodity/commodity-share-the-bill-list/index',})}if(index == 5) {// 每日签到隐藏this.setData({signInFrame: true,})}if (index == 6) {wx.navigateTo({url: '../my/my-generalize/index',})}if (index == 7) {wx.navigateTo({url: '../commodity/commodity-exclusive-list/index',})}if (index == 8) {wx.navigateTo({url: '../shop/shop-list/index',})}if (index == 9) {wx.switchTab({url: '../commodity/goods-category/index',})}},

以上就是今日所有内容了

如果对你有帮助,请加一下QQ群: 1102727334 开发交流群

微信小程序使用swiper制作左右滑动tabs导航相关推荐

微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
微信小程序-锚点定位+内容滑动控制导航选中
之前两篇文章分别介绍了锚点定位和滑动内容影响导航选中,这里我们就结合起来,实现这两个功能! 思路不再多说,直接上干货! WXML <view class="navigateBox&qu ...
微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序利用swiper+scroll-view实现Tab切换
微信小程序利用swiper+scroll-view实现Tab切换先放一张效果图需要实现的功能逻辑: 1.当用户点击tab的时候,tab样式发生改变,并且下方对应的展示内容也发生改变. 2.当用户滑 ...
微信小程序：swiper轮播图添加外层圆角
微信小程序:swiper轮播图添加外层圆角 .swiper-wrap{overflow: hidden;border-radius: 8rpx;box-sizing: border-box;width ...
微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
微信小程序：block制作动态商品列表
微信小程序:block制作动态商品列表在制作微信小程序时,我们往往会碰到需要动态生成列表的情况,本文便是以常见的商品列表为例来学习如何利用block制作动态商品列表. 运行截图实现代码 js: P ...
个人怎么制作微信小程序，微信小程序可以免费制作吗？微信小程序制作教程
微信小程序微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应 ...

微信小程序使用swiper制作左右滑动tabs导航

微信小程序使用swiper制作左右滑动tabs导航相关推荐

最新文章

热门文章