微信小程序iOS下拉白屏晃动问题解决方案

这篇文章主要介绍了微信小程序iOS下拉白屏晃动问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

问题

感觉ios的小程序每个页面都可以下拉出现白屏

有时页面带有滑动的属性会跟着晃动，体验不是很好

解决办法：

先禁止页面下拉

<config>
  {  

    navigationBarTitleText: "购物车",
    disableScroll:true
  }
</config>

这样的话页面整个都拉不动了，下面溢出的内容就拉不出来了，此时用overflow：scroll间接滑动

.content{
  width:100%;
  height：600rpx；
  overflow-y: scroll；
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序开发之IOS和Android兼容的问题

    微信小程序开发之IOS和Android兼容的问题 一.时间转换问题: 这不只是小程序上面的问题是ios系统 都有这个问题 就是new  Date("2017-06-16") 在IOS会出现NAN的情况所以对于时间转换需要另行封装,解决方案如下 1.替换"-"为"/" 2.删除"."后面的字符串(带毫秒也会有问题) 代码如下: /** * 字符串转换为时间 * @param {String} src 字符串 */ strToDa

  • 微信小程序中遇到的iOS兼容性问题小结

    前言 随着小程序的热度不减,更多的电商大佬来时使用小程序,在微信小程序开发中,经常会遇到一些兼容性的问题,下面这篇文章就记录下在微信小程序中遇到的一些兼容性问题,iOS兼容性 1.iOS中input的placeholder属性字体不居中 对placeholder设置line-height及font-size 对input设置高度 2.iOS中滚动卡顿 设置-webkit-overflow-scrolling:touch; 3.微信小程序中解决iOS中new Date() 时间格式不兼容 在实现倒

  • iOS 真机调试微信小程序

    iOS 真机调试微信小程序

    平时开发小程序可以在开发者工具中进行调试,开发者工具提供了类似 Chrome DevTools 的调试面板,对于前端开发者来说入门门槛比较低. 小程序开发完成之后,我们需要在真机上进行测试,真机调试方面小程序开发者工具有预览.远程调试和设置体验版本三大部分功能.除了这三种方式之外,我们还可以使用真机远程调试,在 iOS 上可以通过实现 Safari 调试代码,安卓中可以安装 X5 内核的 inspect 版本,开启 Chrome remote debug 模式.使用真机调试不仅可以发现开发者工具

  • IOS中微信小程序播放缓存的音频文件的方法

    很多时候我们都想把数据预先缓存到本地,节省带宽.但是最近在处理微信小程序播放缓存到本地的音频文件的时候,遇到一些小问题,然后对于安卓和IOS需要采用不同的播放策略. 首先,如果哪怕用audio标签来播放在线的音频文件,假如服务端没有实现断点续传,IOS是无法播放的,这个需要注意. 对于缓存在小程序的音频(wx.saveFile(OBJECT)保存的音频),IOS只能通过播放背景音乐的接口播放,其它播放方法都没有成功实践,而对于安卓,内部 audio 上下文 innerAudioContext 对

  • 解决微信小程序中转换时间格式IOS不兼容的问题

    昨天弄一个微信倒计时;遇到了这个为题,调试了才找到问题的所在,然后在网上找了资料才知道这个问题的原因,来是因为IOS系统不支持2018-08-30这样的格式的时间导致的 let olddata ='2018-08-30 11:00:00'; let mydata=new Date(olddata); console.log(mydata); let newdata=mydata.getTime(); 这样的代码安卓手机开发手机和微信小程序编辑器测试都没有问题,唯独IOS获取的日期为不显示,原来I

  • 微信小程序在ios下Echarts图表不能滑动的问题解决

    微信小程序在ios下Echarts图表不能滑动的问题解决

    问题现象 这个问题的现象说起来很简单. 小程序页面中有一篇很长的文章,内部有一个Echarts图表,手指上下滑动观看内容. 但是手指滑动区域在Echarts图表上时,页面却不能滑动了. 如下图: 追踪问题原因 因为在小程序上渲染图表用到的是echarts-for-weixin这个组件,而这个组件确实不支持一些Echarts功能. 所以最开始我怀疑是这个组件的问题,认为它把我的滑动事件给吞了. 为了确认这个问题,我直接在这个组件ec-canvas旁加了个兄弟节点view,然后用绝对定位将其覆盖在e

  • ios版微信小程序跳一跳辅助

    ios版微信小程序跳一跳辅助

    注意:ios的测试环境只能在Mac电脑上,windows上不能测试(黑苹果除外),因为需要安装xcode,而Xcode没有windows版本 本次是针对部分程序员所写不适用于新手 !!!   测试环境是python3 + Mac +苹果7(ios11.1.2操作系统) 安卓版本请移动:安卓版本跳一跳辅助 ios直接改分版本戳这里 飞机票 在安装蟒蛇的前提下,执行如下几步 1.先去github上下载WebDriverAgent这个项目,如果本地有git可以通过指令 git clone https:

  • 微信小程序iOS下拉白屏晃动问题解决方案

    这篇文章主要介绍了微信小程序iOS下拉白屏晃动问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 问题 感觉ios的小程序每个页面都可以下拉出现白屏 有时页面带有滑动的属性会跟着晃动,体验不是很好 解决办法: 先禁止页面下拉 <config> { navigationBarTitleText: "购物车", disableScroll:true } </config> 这样的话页面整个都拉不动了,下面溢

  • 微信小程序 select 下拉框组件功能

    微信小程序 select 下拉框组件功能

    一.源码地址 https://github.com/imxiaoer/WeChatMiniSelect 二.效果图 录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. select.wxml <view class="select-box"> <view class="select-current" catchtap="openClose"> <text class="current-name

  • 微信小程序实现下拉刷新和轮播图效果

    微信小程序实现下拉刷新和轮播图效果

    本文实例为大家分享了微信小程序实现下拉刷新和轮播图展示的具体代码,供大家参考,具体内容如下 先上图,再解释 wxml页面代码: <scroll-view scroll-y="true" bindscrolltolower="lower" style="height:{{screenH}}px" class="scroll"> <swiper autoplay="{{autoplay}}"

  • 微信小程序select下拉框实现效果

    微信小程序select下拉框实现效果

    小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉 这里为了更清楚的显示层级 就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'> <text>商品金额</text> <text>￥99.00</text> </view> <!--下拉框 --> <view class='list-msg2' bindtap='bi

  • 微信小程序select下拉框实现源码

    微信小程序select下拉框实现源码

    这篇文章主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉,这里为了更清楚的显示小程序层级 就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'> <text>商品金额</text> <text>￥99.00<

  • 微信小程序实现下拉菜单切换效果

    本文实例为大家分享了微信小程序实现下拉菜单切换展示的具体代码,供大家参考,具体内容如下 效果图: wxml: <!-- 下拉菜单 --> <view id="swiper-tab"> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"

  • 微信小程序实现下拉刷新和上拉分页效果的方法详解

    目录 下拉刷新 上拉分页 下拉刷新 下拉刷新这个玩意吧,很有用,但是在我博客关联的小程序中,用处不大,也是,我那个小程序一共也没有几个页…… 我这里还是用在首页,上拉分页,下拉刷新重载分页.我就是这么做的. 下拉刷新和上拉分页还是有区别的. 下拉刷新需要在index.json中添加属性: "enablePullDownRefresh": true Index.js Page({ data: { // 文章数组 articleList:[], //每页显示的行数: pagesize: 2

  • 微信小程序实现下拉选项框

    微信小程序实现下拉选项框

    本文实例为大家分享了微信小程序实现下拉选项框的具体代码,供大家参考,具体内容如下 效果图 test.js /**    * 页面的初始数据    */   data: {     shows: false, //控制下拉列表的显示隐藏,false隐藏.true显示     selectDatas: ['消费账户', '平台返利账户', '微信钱包'], //下拉列表的数据     indexs: 0, //选择的下拉列 表下标,   },   // 点击下拉显示框   selectTaps()

  • 微信小程序实现下拉刷新动画

    微信小程序实现下拉刷新动画

    微信小程序动画之下拉刷新动画的具体代码,供大家参考,具体内容如下 简易的效果 下面放代码: js: var animation = wx.createAnimation({}) var i = 1; Page({ data: { donghua: true, left1: Math.floor(Math.random() * 250 + 1), left2: Math.floor(Math.random() * 250 + 1), left3: Math.floor(Math.random()

  • 微信小程序实现下拉框功能

    微信小程序实现下拉框功能

    微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果 下面来看一下代码: 首先WXML <view class='select_box'> <view class='select' catchtap='selectTap'> <text class='select_text'>{{selectData[index]}}</text> <image class='select_img {{show&&&q

随机推荐