uniapp 微信小程序遇到的坑

一、使用自定义tabbar,tabbar列表页面使用原生下拉刷新

**问题:**在开发微信小程序 使用自定义tabbar,tabbar列表页面使用原生下拉刷新 模拟机是没问题的,在安卓端真机调试会遇到下拉刷新时tabbar也会跟着下拉出页面 ,回弹后显示正常

解决方案: 使用scroll-view嵌套模式,可滚动视图区域。使用竖向滚动,需要给scroll-view一个固定高度

skyline 渲染模式下,当存在两个 scroll-view 相互嵌套的场景时,两者的滚动不能很丝滑的进行衔接,故可将外层 scroll-view 改成嵌套模式,这样可以让两个 scroll-view 的滚动衔接起来。

javascript 复制代码
<!-- 外层 scroll-view -->
<scroll-view
  type="nested"
  scroll-y
  refresher-enabled="{{true}}"
>
  <view slot="refresher">自定义 refresher</view>
  <nested-scroll-header><view>外层 scroll-vew 的节点 1</view></nested-scroll-header>
  <nested-scroll-header><view>外层 scroll-vew 的节点 2</view></nested-scroll-header>
  <nested-scroll-body>
    <swiper>
      <swiper-item>
        <!-- 里层 scroll-view -->
        <scroll-view type="list" associative-container="nested-scroll-view">
          <view>里层 scroll-vew 的节点 1</view>
          <view>里层 scroll-vew 的节点 2</view>
        </scroll-view>
      </swiper-item>
      <swiper-item></swiper-item>
      <swiper-item></swiper-item>
    </swiper>
  </nested-scroll-body>
</scroll-view>

二、页面使用scroll-view标签页面高度设置100vh,页面输入框内容会发生上移

**问题:**页面使用scroll-view标签页面高度设置100vh,页面输入框内容会发生上移

**解决方案:**1、页面高度设置为100%

2、使用calc样式

javascript 复制代码
	.scroll-view-hight {
		height: calc(100vh + 1px);
	}

三、微信小程序使用vant下拉菜单在页面中间非遮罩层部分可滚动

**解决方案:**1、使用变量状态控制页面是否可滚动,禁用滚动条

2、使用顶部弹出层,禁用遮罩层事件

相关推荐
清风细雨_林木木4 小时前
uni-app 和 uni-app x 的区别
uni-app
iOS阿玮4 小时前
期待iOS开发者加入,共同抵制“苹果税”反垄断招募令!
uni-app·app·apple
普通网友4 小时前
支持二次开发的代练App源码:订单管理、代练监控、安全护航功能齐全,一站式解决代练护航平台源码(PHP+ Uni-app)
安全·uni-app·php
蜕变菜鸟4 小时前
uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。
uni-app
毕设源码-邱学长18 小时前
【开题答辩全过程】以 基于微信小程序的宠物领养系统为例,包含答辩的问题和答案
微信小程序·小程序·宠物
canglingyue18 小时前
微信小程序日历事件添加实现
微信小程序·小程序
毕设源码-邱学长1 天前
【开题答辩全过程】以 基于微信小程序校园综合服务平台的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
Thetimezipsby1 天前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
從南走到北1 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·开发语言·微信·微信小程序·小程序
猫七先生1 天前
微信小程序一键登录可行性方案
前端·微信小程序