这篇文章主要介绍了微信小程序实现swiper切换卡内嵌条不显示的方法,涉及微信小程序swiper选项卡组件相关操作,需要的朋友可以参考下

本文实例讲述了微信小程序实现swiper切换卡内嵌条不显示的方法。分享给大家供大家参考,具体如下:

index.wxml文件:

<view>
 <view bindtap="swichNav">为你推荐</view>
 <view bindtap="swichNav">新品上架</view>
 <view bindtap="swichNav">最热商品</view>
</view>
<swiper current="{{currentTab}}" duration="300" bindchange="bindChange" >
 <swiper-item>
 <scroll-view scroll-y="{{true}}">
  <view style='height:200px'>为你推荐</view>
  <view style='height:200px'>为你推荐</view>
  <view style='height:200px'>为你推荐</view>
  <view style='height:200px'>为你推荐</view>
  <view style='height:200px'>为你推荐</view>
 </scroll-view>
 </swiper-item>
 <swiper-item>
  <view>新品上架</view>
 </swiper-item>
 <swiper-item>
  <view>最热商品</view>
 </swiper-item>
</swiper>

index.wxss文件:

/**index.wxss**/
.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}
.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 50%;
}
.userinfo-nickname {
 color: #aaa;
}
.usermotto {
 margin-top: 200px;
}
.swiper-tab {
 width: 100%;
 text-align: center;
 line-height: 80rpx;
 margin-top:10rpx;
 margin-bottom: 20rpx;
}
.swiper-tab-item {
 font-size: 30rpx;
 display: inline-block;
 width: 33.33%;
 color: #666;
}
.on {
 color: #FEA611;
 border-bottom: 5rpx solid #FEA611;
}
.swiper-box {
 display: block;
 height: 100%;
 width: 100%;
 overflow: hidden;
}
.swiper-box view {
 text-align: center;
}

index.js文件:

//获取应用实例
const app = getApp()
Page({
 data: {
  motto: 'Hello World',
  userInfo: {},
  hasUserInfo: false,
  canIUse: wx.canIUse('button.open-type.getUserInfo'),
  clientWidth: 0,
  clientHeight: 0,
  // tab切换
  currentTab: 0
 },
 //事件处理函数
 bindViewTap: function () {
  wx.navigateTo({
   url: '../logs/logs'
  })
 },
 onLoad: function () {
  var that = this;
  wx.getSystemInfo({
   success: function (res) {
    that.setData({
     clientHeight: res.windowHeight
    });
   }
  });
  if (app.globalData.userInfo) {
   this.setData({
    userInfo: app.globalData.userInfo,
    hasUserInfo: true
   })
  } else if (this.data.canIUse) {
   // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
   // 所以此处加入 callback 以防止这种情况
   app.userInfoReadyCallback = res => {
    this.setData({
     userInfo: res.userInfo,
     hasUserInfo: true
    })
   }
  } else {
   // 在没有 open-type=getUserInfo 版本的兼容处理
   wx.getUserInfo({
    success: res => {
     app.globalData.userInfo = res.userInfo
     this.setData({
      userInfo: res.userInfo,
      hasUserInfo: true
     })
    }
   })
  }
 },
 getUserInfo: function (e) {
  console.log(e)
  app.globalData.userInfo = e.detail.userInfo
  this.setData({
   userInfo: e.detail.userInfo,
   hasUserInfo: true
  })
 },
 bindChange: function (e) {
  var that = this;
  that.setData({ currentTab: e.detail.current });
 },
 swichNav: function (e) {
  var that = this;
  if (this.data.currentTab === e.target.dataset.current) {
   return false;
  } else {
   that.setData({
    currentTab: e.target.dataset.current
   })
  }
 }
})

希望本文所述对大家微信小程序开发有所帮助。

最新资讯
消息称满帮最早今年赴美IPO 最多融资20亿美元

消息称满帮最早今年赴

据彭博社报道,知情人士今日称,中国卡车物流平台满帮集团
字节跳动CEO张楠谈遭微信“封杀”:反而促使用户在抖音内发酵

字节跳动CEO张楠谈遭

在今日的极客公园·创新大会2021上,作为神秘嘉宾的北京
中国联通:将寻求专业意见和保留一切权利 保护联通红筹公司权益

中国联通:将寻求专业意

1月28日晚间消息,中国联通公告,此前纽约证交所监管部门
快手最新孖展额4433亿港元超购421倍 市场预测冻资可冲万亿

快手最新孖展额4433亿

截至周四下午5时,据新浪港股不完全统计,快手公开发售部
FF将曲线上市:估值34亿美元 贾跃亭烈火重生回国有望?

FF将曲线上市:估值34亿

Faraday Future今日宣布,将通过与Property Solutions A
投行KeyBanc:推特营收有望超预期,上调其评级至“增持”

投行KeyBanc:推特营收

投行KeyBanc Capital Markets的分析师将推特(TWTR.US)股
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,