【原生小程序小程序开发中,块内容使用position绝对定位之后 不显示】

这篇具有很好参考价值的文章主要介绍了【原生小程序小程序开发中,块内容使用position绝对定位之后 不显示】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

原来写法

<view class="map_bg" id="weixinMap" bindtap="event" style="display: none;">
        <map subkey="{{subKey}}" style="width:100%;height:100%;z-index: -10;"  latitude="23.099994" longitude="113.324520" scale="18" enable-zoom="{{false}}" enable-scroll="{{false}}">
        </map>
        <view class="map_company flex_start">
          <image class="map_site" src="../../public/images/companyshow/tc_icon.png"></image>
          <view class="company">
            <view class="companyname omit">{{base_info.companyname}}</view>
            <view class="district omit">{{base_info.district_text}}</view>
          </view>
          <view class="arrow_right"></view>
        </view>
      </view>
      <view class="address address_distance">
        <image class="map_site" src="../../public/images/jobshow/address.png"></image>
        {{distance||'计算中'}}
      </view>
.company_item .map_company{
padding: 10rpx;
width: 550rpx;
 height: 80rpx;
 border-radius: 8rpx;
 background: #fff;
 position:absolute;
 top:-50%;
 left:-50%;
 transform:translate(-50%,-50%);
 color: #000;
 }

解决:在map外面包一层以及整体在外面包一层+定位修改为static+z-index文章来源地址https://www.toymoban.com/news/detail-838158.html

<view>
        <view class="map_bg" id="weixinMap" bindtap="event">
            <map subkey="{{subKey}}" style="width:100%;height:100%;z-index: -10;" latitude="23.099994" longitude="113.324520" scale="18" enable-zoom="{{false}}" enable-scroll="{{false}}">
            </map>
        </view>
        <view class="map_company flex_start">
          <image class="map_site" src="../../public/images/companyshow/tc_icon.png"></image>
          <view class="company">
            <view class="companyname omit">{{base_info.companyname}}</view>
            <view class="district omit">{{base_info.district_text}}</view>
          </view>
          <view class="arrow_right"></view>
        </view>
      </view>
      <view class="address address_distance">
        <image class="map_site" src="../../public/images/jobshow/address.png"></image>
        {{distance||'计算中'}}
      </view>
.company_item .map_company {
  padding: 10rpx;
  width: 550rpx;
  height: 80rpx;
  border-radius: 8rpx;
  background: #fff;
  position:static;
  margin: -23% auto 0;
  z-index: 1000;
  color: #000;
}

到了这里,关于【原生小程序小程序开发中,块内容使用position绝对定位之后 不显示】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 【CSS】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )

    要实现如下样式的轮播图 : 取消默认内外边距 : 本示例中主要是 取消 body 的内边距 ; 取消列表样式 : 主要是 取消列表项前的小圆点 ; 设置图片自适应 : 设置的图片可能 大于或小于 图片容器 , 设置其宽度填充 100% 父容器 , 可以保证图片填充满父容器 ; 子绝父相 : 在该轮播图中

    2023年04月21日
    浏览(39)
  • 原生微信小程序开发记录

    1. 拿到项目 先构建 2. 小程序与普通网页开发的区别 网页开发渲染线程和脚本线程是互斥的,这也是为什么长时间的脚本运行可能会导致页面失去响应,而在小程序中,二者是分开的,分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API,进行 DOM

    2024年02月20日
    浏览(29)
  • 【微信小程序】底部弹窗固定定位fixed+textarea,导致的adjust-position在安卓手机失效问题

    安卓手机测试时候发现,fixed固定定位导致键盘弹出时,textarea无法正常被顶上去。 然后我就尝试了第二种方法用scroll-view将高度设置为100vh时,将页面保持在视口高度,这个时候发现不管是弹窗是fixed还是absolute都无法让安卓手机的键盘弹出时textarea顶上去 最后我用了最后一种

    2024年01月18日
    浏览(48)
  • [HTML]Web前端开发技术10(HTML5、CSS3、JavaScript )CSS+DIV页面布局,固定定位,相对定位relative,绝对定位absolute,层定位的应用——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 课后练习 网页标题:固定定位 网页标题:相对定位relative 网页标题:绝对定位absolute 网页标题:层定

    2024年02月02日
    浏览(56)
  • 微信小程序开发如何开启地图定位(个人开发版)(连接第三方百度地图api)

    目前腾讯位置服务提供路线规划、地图选点、地铁图、城市选择器插件四款插件产品 在微信公众平台 选择开发工具可开启腾讯位置服务 之后便可以在 设置--第三方设置中添加自己所需要的腾讯地图插件 因为我做的小程序中需要用到地图选点功能 但是在安装 地图选点插件

    2024年02月11日
    浏览(42)
  • 从零开始 | 原生微信小程序开发(二)

    !打好最基础的部分,为后期的项目做好准备 ** 学习注册App函数和Page函数 ** 认识一些常见组件,其余组件使用时查找文档 ** 对于wxss和css,两种区分好   1. 每个小程序都需要在app.js中调用该函数注册小程序实例 注册时,可以绑定对应生命周期函数,执行对应代码 可以做些

    2024年02月11日
    浏览(45)
  • 微信小程序定位开发 逆地理位置查询 经纬度获取位置名称

    一. 微信小程序获取用户定位==经纬度(官方) (1)官方方法:wx.getLocation(Object object) (2)官方链接:https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html (3)关键点: 申请权限 :在小程序管理后台,「开发」-「开发管理」-「接口设置」中申请开通该接口权限。

    2024年02月16日
    浏览(47)
  • 关于使用uniapp截图APP内容的两种办法,及一种小程序原生的截图办法

    方法一 html2canvas 方法二 播放视频时截图 方法三 小程序原生使用的截图

    2024年02月13日
    浏览(37)
  • 微信小程序开发原生与uniapp框架的选择

    针对小白来说,原生与uniapp框架两者具体选择学习那一项呢? 分析: 原生: 特点: 1、技术随官方更新而更新 2、专属于小程序开发,匹配度高 缺点: 1、不能通用其他平台小程序,兼容度底 uniapp: 特点: 1、通用大多数平台小程序 2、低项目,速成快 3、对于具有vue基础的

    2024年02月11日
    浏览(61)
  • Android 原生定位开发(解决个别手机定位失败问题)

    在android开发中地图和定位是很多软件不可或缺的内容,这些特色功能也给人们带来了很多方便。定位一般分为三种发方案:即GPS定位、Google网络定位以及基站定位。 本文分别介绍GPS定位、以及基于Google的网络Wifi定位的详细步骤,(小米手机获取位置信息locationManager.getLastK

    2024年02月06日
    浏览(48)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包