热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例

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

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

index.wxml文件:


 为你推荐
 新品上架
 最热商品


 
 
  为你推荐
  为你推荐
  为你推荐
  为你推荐
  为你推荐
 
 
 
  新品上架
 
 
  最热商品
 


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
   })
  }
 }
})

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


推荐阅读
  • 开发笔记:小程序分类页实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表
    开发笔记:小程序分类页实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表 ... [详细]
  • 新冠肺炎疫情期间,各大银行积极利用手机银行平台,满足客户在金融与生活多方面的需求。线上服务不仅激活了防疫相关的民生场景,还推动了银行通过互联网思维进行获客、引流与经营。本文探讨了银行在找房、买菜、打卡、教育等领域的创新举措。 ... [详细]
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
  • 本文详细介绍了如何使用 PHP 接收并处理微信支付的回调结果,确保支付通知能够被正确接收和响应。 ... [详细]
  • 微信小程序:授权登录与手机号绑定
    本文详细介绍了微信小程序中用户授权登录及绑定手机号的流程,结合官方指引和实际开发经验,提供了一套完整的实现方案,帮助开发者更好地理解和应用。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • 程序员如何优雅应对35岁职业转型?这里有深度解析
    本文探讨了程序员在职业生涯中如何通过不断学习和技能提升,优雅地应对35岁左右的职业转型挑战。我们将深入分析当前热门技术趋势,并提供实用的学习路径。 ... [详细]
  • 微信小程序中实现位置获取的全面指南
    本文详细介绍了如何在微信小程序中实现地理位置的获取,包括通过微信官方API和腾讯地图API两种方式。文中不仅涵盖了必要的准备工作,如申请开发者密钥、下载并配置SDK等,还提供了处理用户授权及位置信息获取的具体代码示例。 ... [详细]
  • 本文探讨了在C语言编程中,如何有效避免多文件项目中的重定义问题,通过合理使用预处理器指令和extern关键字,确保代码的健壮性和可维护性。 ... [详细]
  • 区块链的兴起:恰逢其时,犹如1996年的互联网
    本文探讨了区块链技术的发展阶段,将其与1996年互联网的兴起进行对比,分析了当前区块链技术的现状及其未来潜力。 ... [详细]
  • 掌握Spring MVC中自定义类型转换与格式化的技巧
    近期,在开发一款小程序的过程中遇到了几个Spring MVC接口需要传递时间参数的问题。本文将详细介绍如何利用Java 8 Time API在Spring MVC中实现时间参数的自定义类型转换和格式化。 ... [详细]
  • 探讨在微信小程序环境中是否能够获取到全局this对象,并分析其背后的技术实现。 ... [详细]
  • 智慧城市建设现状及未来趋势
    随着新基建政策的推进及‘十四五’规划的实施,我国正步入以5G、人工智能等先进技术引领的智慧经济新时代。规划强调加速数字化转型,促进数字政府建设,新基建政策亦倡导城市基础设施的全面数字化。本文探讨了智慧城市的发展背景、全球及国内进展、市场规模、架构设计,以及百度、阿里、腾讯、华为等领军企业在该领域的布局策略。 ... [详细]
  • 微信小程序koa获取微信accesstoken ... [详细]
  • 鸿蒙系统实战:打造高效聊天辅助应用
    通过鸿蒙系统开发一款高效的聊天辅助应用,本教程将详细展示从零开始构建这一实用工具的全过程,旨在为开发者提供全面的技术指导。 ... [详细]
author-avatar
男人吧总负责人千金
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有