uni-app中在模拟器上内容可以滚动,真机上失效问题解决

这篇具有很好参考价值的文章主要介绍了uni-app中在模拟器上内容可以滚动,真机上失效问题解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uni-app中在模拟器上内容可以滚动,真机上失效问题解决

1、刚刚开始使用的是view组件,给定了高度,超出部分y轴滚动,微信小程序模拟器上面一直为正常

代码如下:

<template>
  <tn-popup v-model="show"
            safeAreaInsetBottom
            mode="bottom"
            closeBtn
            @close="handleClose"
            :maskCloseable="false"
            height="70vh"
    >
    <view class="music-container">
      <view class="music-list"></view>
    </view>
  </tn-popup>
</template>

<style scoped lang="scss">
.music-list {
  max-height: 60vh; // 给定固定高度
  overflow-y: scroll; // y轴滚动
}
</style>

2、为了适配真机,在view组件外边套用了scroll-view,利用该组件中的组件配置滚动文章来源地址https://www.toymoban.com/news/detail-807078.html

<template>
  <tn-popup v-model="show"
            safeAreaInsetBottom
            mode="bottom"
            height="1200rpx"
            @close="handleClose">
    <view class="music-container">
      <scroll-view scroll-y style="height: 1050rpx;">
        <view class="music-list"></view>
      </scroll-view>
    </view>
  </tn-popup>
</template>

到了这里,关于uni-app中在模拟器上内容可以滚动,真机上失效问题解决的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Fiddler+雷电模拟器APP抓包

    因为工作中涉及到移动端的内容相对较多,在需要接口文档时,开发人员无法立即提供,因此需要我们自己使用对APP进行抓包,完成相关的测试工作。 1、打开Fiddler客户端,依次进入Tools—options设置,先点击Connections设置,选择Allowremote computers to connect,确认监听端口为8888。

    2024年02月12日
    浏览(47)
  • HbuilderX在模拟器选中元素后鼠标不能点击拖动内容

    复现: 随便选择一个元素后不能拖动,例如scroll-view; 解决办法: 在连续点击两次选择元素解决该问题

    2024年02月21日
    浏览(55)
  • HBuilderX 运行Android App项目至雷电模拟器

    一、下载安装HBuilderX         HBuildeX官网         安装最新的正式版,或者点击历史版本查看更多版本;【ps:Alpha版本为开发版,功能更多,但是也不稳定,属于测试版本】         直接将压缩包解压,运行HBuildeX即可。 二、下载安装雷电模拟器          雷电模拟器

    2024年02月03日
    浏览(55)
  • 微信小程序在模拟器可以显示,手机扫编译二维码显示不了 解决办法

    1,本地服务器即是使用localhost,如果希望在手机上可以演示,请把微信开发者工具代码中wx.request请求数据的所有带有localhost的路径全部替换本机的ip地址,如http://localhost:8080/test/hhh, 改成http://172.00.00.000/test/hhh, 这里只是举个例子,查看ip地址方法: 打开cmd,输入ipconfig,红色

    2024年02月12日
    浏览(42)
  • 1、Flutter移动端App实战教程【环境配置、模拟器配置】

    Flutter是Google用以帮助开发者在IOS和Android 两个平台开发高质量原生UI的移动SDK,一份代码可以同时生成IOS和Android两个高性能、高保真的应用程序。 之所以说Flutter能够达到可以媲美甚至超越原生的体验,主要在于其拥有高性能的图形渲染能力,首先对比下Flutter和原生Android及其

    2024年02月09日
    浏览(36)
  • 软件测试/测试开发 | app测试中常用的Android模拟器

    公众号搜索:TestingStudio 霍格沃兹的干货都很硬核 测试 Android app 的时候,Android 模拟器是经常会用到的工具。模拟器可以轻松的模拟不同的品牌、分辨率和 Android 系统版本。可以让兼容测试做起来更容易。 下面就来看看目前常用的 Android 模拟器都有哪些。 Emualor 是 Android St

    2024年02月15日
    浏览(62)
  • Android Spider Fiddler - 夜神模拟器证书安装App抓包

    抓包概念:抓包是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作,也用来检查网络安全等。 MT管理器下载链接-提取码:pwjj:https://pan.baidu.com/s/1dH-TeB6gChPDYoYpH1aXQg?pwd=pwjj 提示:以下是本篇文章正文内容,下面案例可供参考 1.1下载安装 官方地址:https://

    2024年02月02日
    浏览(66)
  • python+appium+夜神模拟器搭建app自动化环境

    目录 1.Appium用法 2.准备工具 1、安装JDK并配置JDK的环境变量 2、安装安卓SDK并配置SDK的环境变量。 3、安装夜神模拟器并在模拟器上安装被测app 4、安装并配置python 5、安装Node js 6、安装和配置Appium appium是做app的一个自动化框架,它的主要优势是支持android和ios,另外脚本语言也

    2024年02月07日
    浏览(55)
  • Appium----模拟器 Fiddler Frida对闲鱼app进行抓包

    【原文链接】Appium----模拟器+Fiddler+Frida对闲鱼app进行抓包 (1)参考 Appium----基于Windows系统安装雷电模拟器 安装模拟器 (2)参考 Fiddler----Fiddler的下载与安装 安装Fiddler (3)参考 Appium----Frida的安装与使用 安装Frida (4)在cmd中执行ifconfig查看本机ip地址,比如这里是192.168.1.

    2024年02月16日
    浏览(58)
  • 通过Fiddler模拟器抓包微信小程序(适用APP)

    下载模拟器 准备抓包软件(fiddler或者Charles) fiddler设置 (1)打开设置:Tools-Options (2)点击Connections,设置端口和勾选第二个选项 (3)点击HTTPS,勾选前三个选项,下载证书 4、模拟器设置(夜神模拟器) (1)开启root权限 (2) 打开模拟器wlan设置 (长按连接的无线) 5、

    2023年04月18日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包