微信小程序基于swiper组件的tab切换

代码地址如下：
http://www.demodashi.com/demo/14010.html

一、前期准备工作

软件环境：微信开发者工具
官方下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1、基本需求。

基于swiper组件的tab切换

2、案例目录结构

二、程序实现具体步骤

1.tab切换index.wxml代码

<view class="continer"><!--内容主体-->  <swiper class="swiper" current="1" duration="200"  bindchange="swiperChange" previous-margin="20px" next-margin="20px"  style="height: {{winHeight}}px;">  <swiper-item> <view class="user-box" style="height: {{winHeight-40}}px;"><view class="user-image"><image class="image" src="https://www.geekxz.com/public/uploads/huaqu/team/logo.jpg" /></view> <view class="user-info"><view class="user-job">未知</view><view class="user-name">未知</view><view class="user-introduce">如果你亦环抱着梦想，拥有着无限的才华，我们OkYoung 团队期待您的加入。</view><view class="joinin" bindtap="joinIn">即刻创作</view></view>            </view></swiper-item> <swiper-item> <view class="user-box" style="height: {{winHeight-40}}px;"><view class="user-image"><image class="image" src="https://www.geekxz.com/public/uploads/huaqu/team/logo.jpg" /></view> <view class="user-info"><view class="user-job">未知</view><view class="user-name">未知</view><view class="user-introduce">如果你亦环抱着梦想，拥有着无限的才华，我们OkYoung 团队期待您的加入。</view><view class="joinin" bindtap="joinIn">即刻创作</view></view>            </view></swiper-item> <swiper-item> <view class="user-box" style="height: {{winHeight-40}}px;"><view class="user-image"><image class="image" src="https://www.geekxz.com/public/uploads/huaqu/team/logo.jpg" /></view> <view class="user-info"><view class="user-job">未知</view><view class="user-name">未知</view><view class="user-introduce">如果你亦环抱着梦想，拥有着无限的才华，我们OkYoung 团队期待您的加入。</view><view class="joinin" bindtap="joinIn">即刻创作</view></view>            </view></swiper-item> <swiper-item> <view class="user-box" style="height: {{winHeight-40}}px;"><view class="user-image"><image class="image" src="https://www.geekxz.com/public/uploads/huaqu/team/logo.jpg" /></view> <view class="user-info"><view class="user-job">未知</view><view class="user-name">未知</view><view class="user-introduce">如果你亦环抱着梦想，拥有着无限的才华，我们OkYoung 团队期待您的加入。</view><view class="joinin" bindtap="joinIn">即刻创作</view></view>            </view></swiper-item> </swiper>
</view>

2.部分index.wxss代码

page {  background-color: #0084ff;
}
.continer{
}
swiper-item .user-box{  margin-top: 3%;margin-left: 20rpx;border-radius: 20rpx;  border: 1rpx solid rgba(200, 200, 200, 0.1);box-shadow: 1px 1px 5px rgba(200, 200, 200, 0.4);background-color: #fff;
}
swiper-item .user-image image{width:350rpx;height:350rpx;border-radius: 350rpx;margin-top: 20%;border: 1rpx solid rgba(200, 200, 200, 0.4);box-shadow: 1px 1px 5px rgba(200, 200, 200, 0.8);
}
.user-image{margin: 0 25%;
}
.user-info {text-align: center;height: 240rpx;
}
.user-info view{text-align: center;
}
.user-info .user-name{margin-top: 80rpx;font-size: 40rpx;height: 80rpx;line-height: 80rpx;text-align: center;color: black;font-weight: 600;
}
.user-info .user-introduce{width: 80%;margin: 0 auto;height: 60rpx;line-height: 60rpx;font-size: 36rpx;color: #5d5d5b;
}
.joinin{width: 30%;margin: 0 auto;height: 60rpx;font-size: 32rpx;line-height: 60rpx;margin-top: 170rpx;color: #fff;border-radius: 60rpx;background-color: #118fff;
}

3.部分index.js逻辑代码

a.滑动切换的功能实现

swichNav: function (e) {console.log(e);var that = this;if (this.data.currentTab === e.target.dataset.current) {return false;} else {that.setData({currentTab: e.target.dataset.current,})}},

三、案例运行效果图

四、总结与备注

暂时没有微信小程序基于swiper组件的tab切换

代码地址如下：
http://www.demodashi.com/demo/14010.html

注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

微信小程序基于swiper组件的tab切换相关推荐

微信小程序利用swiper+scroll-view实现Tab切换
微信小程序利用swiper+scroll-view实现Tab切换先放一张效果图需要实现的功能逻辑: 1.当用户点击tab的时候,tab样式发生改变,并且下方对应的展示内容也发生改变. 2.当用户滑 ...
微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
php 实现tab切换_微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）...
本篇文章给大家带来的内容是关于微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现的效果: js: Pa ...
微信小程序：Swiper组件的小圆点的位置如何更改
1.swiper的小圆点没有直接的属性更改位置 2.写代码的过程中无意中发现,可以通过设置swiper的小圆点的高度,至于左右暂时没发现. 3.具体实现 (1)效果图 (2)index.wxml中的代 ...
web前端学习（三）：微信小程序基于H5规范，开发Android应用程序
前言: 微信小程序开发框架的目标是通过尽可能简单,高效的方式让开发者可以在微信中开发具有原生APP体验的服务. 整个小程序框架系统分为两部分,逻辑层,视图层,小程序提供了自己的视图层描述语言, WXM ...
微信小程序横版日历，tab栏
代码地址如下: http://www.demodashi.com/demo/14243.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
WeZRender：微信小程序Canvas增强组件。
https://segmentfault.com/a/1190000007982805 WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 显示的 ...

微信小程序基于swiper组件的tab切换

一、前期准备工作

1、基本需求。

2、案例目录结构

二、程序实现具体步骤

1.tab切换index.wxml代码

2.部分index.wxss代码

3.部分index.js逻辑代码

三、案例运行效果图

四、总结与备注

微信小程序基于swiper组件的tab切换相关推荐

最新文章

热门文章