swiper 主要是轮播图, 在微信小程序中我用的如下模式:
- index.wxml:
- <view class="swiper-tab">
- <view class="swiper-tab-list {{currentTab==0 ?'on':''}}"data-current="0"bindtap="swichNav"data-post-id='0'> 推荐 </view>
- <view class="swiper-tab-list {{currentTab==1 ?'on':''}}"data-current="1"bindtap="swichNav"data-post-id='1'> 视频 </view>
- <view class="swiper-tab-list {{currentTab==2 ?'on':''}}"data-current="2"bindtap="swichNav"data-post-id='2'> 本地 </view>
- </view>
- <swiper current="{{currentTab}}" class="swiper-box" duration="1000rpx" style="height:{{winHeight -0}}px" bindchange="bindChange">
- <swiper-item>
- </swiper-item>
- <swiper-item>
- <view class="wrap"> 视频 </view>
- </swiper-item>
- <swiper-item>
- <view class="wrap"> 本地 </view>
- </swiper-item>
- </swiper>
- index.wxss:
- .swiper-tab {
- display: flex;
- position:fixed;
- top:0;
- left:0;
- z-index:100;
- background: #fff;
- height:80rpx;
- width:800rpx;
- justify-content: space-between;
- border-bottom: 2rpx solid gainsboro;
- text-align: center;
- line-height:80rpx;
- }
- .swiper-tab-list {
- font-size: 30rpx;
- display: inline-block;
- width: 25%;
- color: #777;
- }
- .on {
- color: #7cba23;
- font-size:40rpx;
- border-bottom: 5rpx solid #7cba23;
- }
- .swiper-box{
- height: 100%;
- width: 100%;
- }
- .swiper-box{
- width:100%;
- margin-top:80rpx;
- font-size:32rpx;
- }
- index.JS:
- var App=getApp()
- Page({
- data: {
- currentTab: 0,
- winWidth: 0,
- winHeight: 0,
- },
- onLoad:function(option){
- var that = this;
- wx:wx.getSystemInfo({
- success: function(res) {
- that.setData({
- winWidth:res.windowWidth,
- winHeight:res.windowHeight
- })
- }
- })
- },
- // 点击切换
- swichNav: function (e) {
- var that=this;
- if (this.data.currentTab === e.target.dataset.current) {
- return false;
- } else {
- that.setData({
- currentTab: e.target.dataset.current
- })
- }
- },
- // 滑动切换 tab
- bindChange: function (e) {
- var that = this;
- that.setData({ currentTab: e.detail.current });
- }
- })
更多效果连接:
希望对刚开始的你有所帮助!!
来源: http://www.bubuko.com/infodetail-2994114.html