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


Posted in Javascript onDecember 20, 2018

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

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

index.wxml文件:

<view class="swiper-tab">
 <view class="swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">为你推荐</view>
 <view class="swiper-tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">新品上架</view>
 <view class="swiper-tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">最热商品</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{clientHeight?clientHeight-'40'+'px':'auto'}}" bindchange="bindChange" >
 <swiper-item>
 <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
  <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
   })
  }
 }
})

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

Javascript 相关文章推荐
jquery tools 系列 scrollable学习
Sep 06 Javascript
javascript window对象属性整理
Oct 24 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 #Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 #Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 #Javascript
JavaScript类的继承操作实例总结
Dec 20 #Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 #Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 #Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 #Javascript
You might like
第五节--克隆
2006/11/16 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python+django加载静态网页模板解析
2017/12/12 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
TensorFlow实现模型评估
2018/09/07 Python
python多进程并发demo实例解析
2019/12/13 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
python图片合成的示例
2020/11/09 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
实习销售业务员自我鉴定
2013/09/21 职场文书
公司前台接待岗位职责
2013/12/03 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
个人承诺书格式
2014/06/03 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
国庆节主题班会
2015/08/15 职场文书
SQL基础的查询语句
2021/11/11 MySQL
vue中div禁止点击事件的实现
2022/04/02 Vue.js