微信小程序实现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 相关文章推荐
js字符编码函数区别分析
Jun 05 Javascript
javascript 写类方式之六
Jul 05 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
JS document对象简单用法完整示例
Jan 14 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
介绍一些PHP判断变量的函数
2012/04/24 PHP
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python将字母转化为数字实例方法
2019/10/04 Python
django框架cookie和session用法实例详解
2019/12/10 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
Joules美国官网:出色的英国风格
2017/10/30 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
教师实习自我鉴定
2013/12/11 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
银行员工考核评语
2014/12/31 职场文书
员工担保书范本
2015/09/22 职场文书
党员反邪教心得体会
2016/01/15 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
承诺书怎么写 ?
2019/04/16 职场文书