uniapp android底部弹框

这篇具有很好参考价值的文章主要介绍了uniapp android底部弹框。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp android底部弹框,带有动画效果

uniapp android底部弹框,uni-app,android
uniapp android底部弹框,uni-app,android文章来源地址https://www.toymoban.com/news/detail-628334.html

    <view class="popup_box">
      <view class="bottom_more" @click="handleClickCancel">
        <image src="@/static/images/rescue/icon_more.png"></image>
      </view>
      <view class="popup_content" :class="[show?'drawer_container_show':'']">
        <subtitle title='联系人' isMore='true' navigatorUrl='/pages/communication/address_list'></subtitle>
        <view class="detail_info">
          <view class="right_line"></view>
          <view class="lineone">
            <view class="detail_name">陈峰山</view>
            <view class="detail_job">新林林业局·值班员</view>
          </view>
          <view class="detail_tel">电话: 13945706180</view>
         <!-- <image :src="require('@/static/images/index/phone.png')" class="phone_img" @click="callPhone">
          </image> -->
        </view>
      </view>
    </view>
//安卓拨打电话,需要授权通讯录等
  callPhone(phone) {
    if (phone) {
      plus.device.dial(phone, true);
    }
  },
  .popup_box {
    position: fixed;
    bottom: 0px;
    z-index: 400;
    width: 100%;

    .bottom_more {
      margin: 0 auto;
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;

      image {
        width: 60rpx;
        height: 20rpx;
        display: block;
      }
    }

    .popup_content {
      width: 100%;
      background-color: #fff;
      border-radius: 20rpx 20rpx 0 0;
      box-sizing: border-box;
      height: 0;
      transform: translate3d(0, 100%, 0);
      transform-origin: center;
      transition: all 0.3s ease-in-out;
      background: #fff;

      .detail_info {
        position: relative;
        box-sizing: border-box;
        // border: 2rpx solid rgb(226, 226, 226);
        background-color: rgba(240, 242, 241, 1);
        padding: 32rpx;
        border-radius: 20rpx;

        .right_line {
          position: absolute;
          left: 0;
          top: 36rpx;
          width: 6rpx;
          height: 38rpx;
          border-radius: 0 4rpx 4rpx 0;
          background: rgb(39, 167, 92);
        }

        .lineone {
          display: flex;
          align-items: center;
          padding-bottom: 22rpx;

          .detail_name {
            font-size: 36rpx;
            font-weight: 700;
            color: rgb(51, 54, 52);
            padding-right: 18rpx;
          }
        }

        .detail_tel,
        .detail_job {
          font-size: 28rpx;
          font-weight: 400;
          color: rgb(87, 89, 88);
        }

        .phone_img {
          position: absolute;
          right: 10rpx;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 72rpx;
          height: 72rpx;
        }
      }
    }

    .drawer_container_show {
      transform: translate3d(0, 0, 0);
      height: 180px;
      padding: 40rpx 30rpx;
      // height: 100rpx;
      // visibility: visible;
    }
  }

到了这里,关于uniapp android底部弹框的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 【uni-app】【01】底部导航栏与页面切换

    1.(配置文件在哪)uni-app 路由控制是在 pages.json 文件中的。 2.(基本配置项有哪些)初学的时候主要有三个配置项,① pages ② globalStyle ③ tabbar [!TOC] 接下来主要是对这三个配置项做一个简单介绍。 负责页面管理。不需要自己写的,你在项目的 pages 文件夹下创建页面会自动生成配

    2023年04月27日
    浏览(55)
  • uni-app 实现凸起的 tabbar 底部导航栏

    效果图 在 pages.json 中设置隐藏自带的 tabbar 导航栏 新建一个 custom-tabbar.vue 自定义组件页面 底部安全区域的适配问题可查看:uni-app 苹果手机底部安全区域的适配问题 在 main.js 中引用组件 在要用到的页面中直接调用

    2024年02月07日
    浏览(54)
  • uni-app弹窗列表滚动, 弹框下面的内容也跟随滚动解决方案

    滑动弹窗里的列表,弹框下面的内容也会跟着滑动,导致弹窗中的列表不能正常滚动 1.弹窗组件代码,需要在最外层的view中加入@touchmove.stop.prevent=\\\"moveHandle\\\",且弹窗中需要滚动的列表要使用scroll-view标签包裹起来,且scroll-y 属性不能忘记加。  

    2024年02月12日
    浏览(53)
  • uni-app前端H5页面底部内容被tabbar遮挡

    在用uniapp写小程序的时候,底部有一部分内容没显示出来,被底部的tabbar遮挡住了 给最外部的view设置样式 padding-bottom: var(--window-bottom) ,如下 参考1 参考2 使用 uni-app 框架开发的一个项目,发现 H5 端页面底部的内容被导航栏(Tabbar)遮挡,小程序端可以正常显示。 查阅资料

    2024年02月04日
    浏览(62)
  • uni-app小程序中做页面滚动底部或顶部加载效果

    在移动应用开发中,无限滚动加载是一个常见的功能,用户可以通过滑动屏幕来加载更多的内容,从而提高应用的用户体验。本文将介绍如何使用Uniapp实现无限滚动加载的功能。 概述 我们需要实现的无限滚动加载功能的具体效果如下: 当用户滑动到底部时,自动加载更多的

    2024年02月08日
    浏览(73)
  • uni-app使用uview-ui实现动态更改底部tabbar

    需求:根据不同的权限(用户 0, 物业 1)展示不同的tabbar 这里使用的是uview-ui@1.8.4 tabbar 在utils文件夹下新建一个tabbar.js文件,来存储不同权限下的底部导航数据 在page.json文件里,把tabbar里的几个页面去重放进去tabBar。 使用vuex 新建store 文件夹存储相关数据 在入口文件 mai

    2024年02月12日
    浏览(51)
  • uni-app 经验分享,从入门到离职(二)—— tabBar 底部导航栏实战基础篇

    这篇文章的内容主题是关于小程序的 tabBar 底部导航栏的入门使用和实战技巧。通过上一篇文章的基础,我们继续对 uni-app 进行更深一步的了解和学习,以上一篇文章创建的项目为例子,我们在这个项目的基础上进行改动和学习小程序的 tabBar 内容。 本篇文章是我的 uni-app 专

    2024年02月11日
    浏览(50)
  • 解决uni-app微信小程序底部输入框,键盘弹起时页面整体上移问题

    做了一个记录页面(类似单方聊天页),输入框在底部;当弹出键盘时,页面整体上移,页面头信息会消失不见 比如一个记录页面,需要在键盘弹出时: 底部的输入框跟随键盘上弹 页面头固定在顶部不动 聊天信息区域(即内容区)调整高度,该区域局部滚动 底部输入框f

    2024年02月13日
    浏览(157)
  • 解决uni-app微信小程序底部input输入框,键盘弹起时页面整体上移问题

    一.存在的问题:           微信小程序聊天界面,当input 框获取焦点时会自动调起手机键盘,当键盘弹起时,会导致页面整体上移,页面头信息会消失不见。 二.需要实现的效果 键盘弹出时, 底部的输入框跟随键盘上弹 ; 页面头固定在顶部不动; 3.聊天信息区域(即内

    2024年02月11日
    浏览(68)
  • 解决 uni-app 微信小程序 input 输入框在底部时,键盘弹起页面整体上移问题

    设置使键盘弹起使页面不上移 设置输入框所在盒子为绝对定位 键盘弹起时获取键盘高度 设置输入框所在盒子的 bottom 的键盘高度

    2024年02月05日
    浏览(63)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包