微信小程序苹果13底部出现空心框

微信小程序苹果13底部出现空心框解决方法如下：

1、打开设置界面，上滑找到其他应用管理。

2、进入其他应用管理详情界面，上滑找到应用微信。

3、点击进入应用微信详情界面，上滑至最下端找到权限管理。

4、进去权限管理上滑至最下端，找到显示悬浮窗口，在手机桌面找到设置。

tips：

1小程序底部菜单标签个数不少于2个，最多不超过5个。

2可以在 阿里巴巴矢量图标库 找到你需要的图标。

3小程序建议图标大小为8181px

我这边选择的是64尺寸的png，每一个图标选择两种颜色，分别对应未选中状态和选中状态，具体按照你们设计项目进行

tips：

1建立项目文件夹：images

2在pages中建立相对应的菜单栏目文件夹

3配置appjson： tabBar配置

1appjson中，"window":{}和"tabBar":{}是同级

2 全局配置

3 设置tabbar地址:wxsetTabBarBadge(Object object)

测试发现 小程序组件（这里指底部导航组件）生命周期的attached 不支持 *** 作 也就是 当想修改底部导航的内容是不支持的

所以上述写法会出现惊奇的结果 哈哈 可以自行运行看看

先了解一下小程序组件的生命周期

[上传中(image-9202b1-1629959126527-0)]

于是我使用了ready 测试发现 部分安卓机 可以 *** 作数据 但是页面底部导航不会更新

看文档发现：

自小程序基础库版本 223 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。

于是， （这里是在小程序底部导航组件里写这个方法）

测试发现 还是没有更改过来

找资料看到

即可

微信小程序自带的API中的页面交互功能，虽然提示功能非常全面，但是所有的交互API中是没有可以自己在提示框中输入文本的功能，那么现在我们来自己做这样的一个提示框（可以带有输入功能），在提示框输入完内容之后，点击确定，可以将文本内容返回，点击取消则可以回到之前的状态。

（在这里，主页面的布局可以根据每个人的想法来布局，这里展示的css之后展示提示框部分的）

1、首先打开微信开发者工具，建立一个代码模板，那么我们这个提示框就是写在这个页面上。

    这里我们主页面叫做index

2、在基本页面中写上一个姓名的文本，当前姓名用<text>{{stuName}}</text>表示，然后为一个button按钮，再在js文件中，建立相应的点击事件以及stuName的信息。这样，一个原始页面就写好了。

下面我们开始d出框页面的制作

<view class='toast-box' hidden='{{!ifName}}'>

<view class='toastbg'></view>

<view class='showToast'>

<view class='toast-title'>

<text>修改姓名</text>

</view>

<view class='toast-main'>

<view class='toast-input'>

<input placeholder='请输入姓名' bindinput='setValue' data-name='stuEidtName'></input>

</view>

</view>

<view class='toast-button'>

<view class='button1'>

<button catchtap='cancel'>取消</button>

</view>

<view class='button2'>

<button catchtap='confirm'>确定</button>

</view>

</view>

</view>

</view>

3、我们可以发现，点击按钮后d出输入框，如果点击除取消和确定之外的地方，是不会有反应的。为了做到这个功能，我们用一个绝对位置的渲染层（toastbg），覆盖住整个页面，并且如果你的页面长度没有滚动的话，请输入min—height：100vh，如果页面发生滚动，请把长度控制在height：100%即可看到整个页面都被覆盖。并且这个覆盖的页面要表现为透明，opacity：02，即可

4、bindinput为写文本时所触发的事件，data-name为文本数据所保存的地方，在js中我们可以把这个数据打印出来，会发现我们所输入的文本信息。

以下为css的代码

toast-box {

width: 100%;

height: 100%;

opacity: 1;

position: fixed;

top: 0px;

left: 0px;

}

toastbg {

opacity: 02;

background-color: black;

position: absolute;

width: 100%;

min-height: 100vh;

}

showToast {

position: absolute;

opacity: 1;

width: 70%;

margin-left: 15%;

margin-top: 40%;

}

toast-title {

padding-left: 5%;

background-color: #2196f3;

color: white;

padding-top: 2vh;

padding-bottom: 2vh;

border-top-right-radius: 16rpx;

border-top-left-radius: 16rpx;

}

toast-main {

padding-top: 2vh;

padding-bottom: 2vh;

background-color: white;

text-align: center;

}

toast-input {

margin-left: 5%;

margin-right: 5%;

border: 1px solid #ddd;

padding-left: 2vh;

padding-right: 2vh;

padding-top: 1vh;

padding-bottom: 1vh;

}

toast-button {

display: flex;

}

button1 {

width: 50%;

}

button2 {

width: 50%;

}

button1 button {

width: 100%;

background-color: white;

color: red;

border-radius: 0px;

border-bottom-left-radius: 16rpx;

}

button2 button{

width: 100%;

background-color: white;

color: black;

border-radius: 0px;

border-bottom-right-radius: 16rpx;

}

picker {

padding-top: 1vh;

padding-bottom: 1vh;

}

我们可以根据自己的喜欢，对提示框的样式进行改变

5、编写js代码，我们需要实现以下一些基本功能（点击出现d窗，取消不改变数据值，确定进行判断数据值，若为空则不能改变，否则可以改变，并且主页面上的内容要变为相应改变后的内容）

6、给最外层的d窗附上hidden（如图所示），为这个值初始为false，点击按钮后触发事件，改false为true，这样即可点击出现d窗。

7、为取消按钮附上点击事件，与hidden的部分刚好相反即可。

8、为书写文本绑定事件，上述代码中命名为setValue，这个函数我们传入一个event进去，将其打印，我们可以发现在其的detail中有我们刚刚所书写的内容，我们将这个值，传给js中data一个属性，这里我们命名为edit。

9、为确定绑定事件，用thisdataedit将这个值进行判断，若为空，我们用wxshowToast提示用户信息没有填写完整，并且页面不会改变。若不为空，则我们setData一下我们的stuName为这个edit的值，并且重新把hidden的属性值改为false。

10、返回到初始页面我们就可以看到我们自己做得一个提示框，并且具有修改值的功能

在小程序内存在列表等形式的页面内增加下拉刷新功能，提高用户体验感，加强界面 *** 作与交互性；

<a name="gXpSi"></a>

1、小程序提供的下拉刷新（无法自定义刷新动画）

可能遇到的问题：

1）下拉时没有出现刷新的点点动画

可能是因为设置的页面背景色与点点动画一致导致无法看到动画，可以在页面配置中配置背景文字颜色：

2、scroll-view内refresher-enabled属性开启自定义刷新

基本库要求：2101

官方文档： scroll-view

3、原始scroll-view自定义下拉实现（为兼容2101一下的下拉刷新

通过监听手指移动距离控制需要下拉模块的下拉距离，主要事件bindtouchstart，bindtouchmove和bindtouchend，bindtouchmove记录手指开始下拉时的起始位置，bindtouchmove计算下拉距离，bindtouchend判断并实现刷新方法。

我的自定义下拉组件（Taro框架）

<a name="fEutw"></a>

1、与ios上橡皮筋效果冲突导致下拉无法触发自定义刷新

页面配置 disabledScroll ，禁止页面滚动，同时页面内的列表滚动需要自己再优化调整；

2、scroll-view的scroll问题

需要设定固定高度然后纵向滚动。[我都忘了是啥问题了……

3、页面下拉刷新结束后再滑动列表出现闪屏

在禁止页面橡皮筋效果后，如果页面内存在需滚动区域使用scroll-view效果比view更加流畅；

不设定固定高度不会发生闪屏但是页面滚动非常不流畅；

4、使用官方提供的scroll-view自定义的动画时，当scroll-view内容不足充满一屏时下拉出现问题

将scroll-view设置固定高度后，将其子元素的高度设置多一像素达到隐形撑满的效果。

5、scroll-view内fixed元素问题

ios内scroll-view内fixed元素层级会出现问题，可能出现被遮挡的问题。

6、当页面内局部需要下拉刷新时可能导致内外两个滚动条问题

一个是页面滚动条一个是scroll-view滚动条，由于 *** 作的时候触发的是scroll-view部分的滚动导致页面滚动无法进行从而影响页面其他 *** 作。

Q5和Q6可以合并成一个问题，当页面需要一个吸顶 *** 作时，即滑动距离超过阈值时导航条吸顶的功能，若scroll-view将整个页面包含就会出现Q5的问题，可能导致在ios内吸顶的导航栏无法显示，若scroll-view只包含需要刷新的部分则会出现Q6的两个滚动条的问题。

1）在页面未触发吸顶时禁止scroll-view模块下拉，触发后放开滚动，同时会导致无法下拉。

2）页面滚动触发，scroll-view模块可下拉，但是滚动区域无法滚动，且下拉动画只显示一次。

在一个微信小程序中想要用到两种不同的tabbar样式，需要在appjs中自定义，在页面加载时进行调用。

比如一个小程序需要两个版本（用户版、商家版），并且能通过一个按钮在两个版本间进行切换，可能会用到这种方式。

此处以两个页面（index，logs）显示两种tabbar样式为例，通过切换按钮进行切换。

首先有一个模板文件：tabbarwxml

在appjson中无需定义“tabBar”

在appjs中自定义如下

在appwxss中定义显示样式

indexwxml，用到自定义tabbar的页面的首部都需要引入模板文件

indexjs

logsjs

加载自定义tabbar的那句话（appeditTabBar）写在onload或onshow中都可以。

只写了两个主页面，其他页面可自行定义跳转。

最后放上效果图：

刚开始开发css或者小程序布局时, 都会遇到这样的问题, 当我们同时使用 flex布局与position:absolute/fixed的时候, 无论怎么修改都达不到最终效果, 如下图所示:

我想在白色区域横向布局这个四组文字, 虽然我设置display:flex, 方向也指向flex-direction:row, 但是最终显示出来还是如左图所示 原因是因为白色底图(shape_box)布局采用的是position:fixed的形式, 这时候文字的d性盒子布局已经失效了, 导致达不到最终效果;

 那么如何解决这种问题呢  我们仅需要在白色底图外层在套一个盒子, 然后最外层盒子使用position:fixed方式布局, 里面都是用flex布局, 效果如下图, 就解决了这类问题;

1请确保 vue 中的 wxrequest 方法和微信小程序提供的 request 方法一致，并且 url 和数据格式也正确；

2一般来说，小程序的请求会受到微信的后端限制，我们可以尝试使用小程序官方提供的 API，例如：wxgetNetworkType等；

3针对vuejs组件底部加载不出来的情况，请首先确保手机浏览器加载页面是否正常，如果浏览器页面正常，那么很可能是小程序没有请求到数据，可以增加异常捕获，例如使用 try catch 语句进行异常处理，这样可以帮助我们更好的找到问题；

4此外，如果手机浏览器正常，但是小程序出现问题，请检查小程序的报错日志，以及你的小程序 SDK 版本是否是官方最新版；

5建议还可以尝试比较小程序与浏览器页面之间的差异，是否是组件本身或者数据请求问题。

以上就是关于微信小程序苹果13底部出现空心框全部的内容，包括:微信小程序苹果13底部出现空心框、微信小程序01：底部菜单(tabBar)、小程序动态加载底部导航（根据不同角色展示不同导航栏）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！