在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
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 });
}
更多效果连接:https://blog.csdn.net/qq273681448/article/details/71078017 希望对刚开始的你有所帮助!! |
请发表评论