微信小程序模态框textarea能滚动的问题

最近写微信小程序做了一个评论的模态框组件，发现页面textarea 用catchtouchmove="true" 禁止滚动安卓机可以，但是苹果的不行，最后定位在textarea 这个标签能滚动的问题

解决办法：

添加 fixed="true" 就不会滚动了

同级多个 v-for 时 key 的值是不允许重复的，key 的绑定是不支持表达式的，需要按照以下方式处理。

控制台"Cannot read property 'globalData' of undefined"

解决办法：将getApp()替换成this

以上错误的写法编译都会不通过

问题应该出在(itemtitle || '')length，其中(itemtitle || '')得到的结果有问题

解决办法：加入in(this)

原因：h5引用组件会渲染成uni-view标签，而小程序直接是comp-a标签，此时虽然显示设置了样式，但不会渲染出来

解决办法：在子组件中设置好样式，或者用/deep/ 对子组件下的节点设置样式

解决办法：在父组件修改对象的数据，不要在子组件 *** 作，网上说是微信小程序无法直接 *** 作props里的对象

1竖向的列表，使用的view的滚动，并设置overflow-y:scroll;滑动列表然后点击列表某一项跳转详情后，再回到列表页，view总是回到了顶部，和 这个问题 一样。

解决办法：

使用scroll-view替换view，设置scroll-y=true，但也产生了一个问题，scroll-view的宽度默认继承父级元素的宽度（屏幕宽度），并不是等于所有子集元素的和，因此需要动态设置scroll-view的宽度

2uni设置scroll-top为0无效

uniapp里面使用scroll-view 组件，动态设置scroll-top 属性来控制滚动高度，但是当想滚动到起始位置时 设置动态值为0 时无效的

解决办法：

首先要定义一个变量记录滚动条的位置

用 @scroll="scrollChange" 监听 滚动条变化

定义一个变量 存滚动的位置，当需要滚动到 初始值的时候

先将滚动的当前高度赋值给scrollTop 然后设置为0 就有效果了

让微信小程序中间的图标也跟着图上下滑动方法如下：

1、在WXML文件中创建一个固定高度的区域，并设置其为可滚动的。

2、在该区域内添加两个元素：一个用于显示上下滑动的，另一个用于显示图标。

3、在CSS样式文件中，对这两个元素分别设置相应的位置和样式。其中，上下滑动的需要设置position：absolute。top：0。left：0。width：100%。height：auto。z-index：-1。等属性，使其能够覆盖住整个区域并与图标区分开来。而图标元素则需要设置position：relative。等属性来保证其相对于父元素的位置不变。

4、使用JavaScript监听区域的滚动事件，获取当前滚动位置，并将其赋值给图标元素的top属性，以实现图标随着滚动上下移动。

下图是小程序 小米Lite 的 Tab 切换效果：切换 Page 时，Tab 下方的指示器（红色横条）是没有滚动效果而是直接闪现到下一个 Page 的，这也是市面上小程序常见的 Tab 切换效果。

原生端 TabLayout 常见的功能就是我们的目标效果，所以 目标效果 如下：

通过了解小程序组件及技术支持，选定通过 scroll-view 、swiper 、swiper-item 、movable-area 、movable-view 配合 插槽 和 抽象节点 来实现自定义组件 tab-layout 。

具体如下图所示 ：

主要实现（点击跳转查看源码）

1复制 tab-layout 组件到项目中 （点击跳转至源码 TabLayout 目录）

4在布局文件中使用 TabLayout 组件，并通过抽象节点 generic:item-tab 和 generic:item-page 分别与自定义的 Tab 和 Page 绑定

5使用自定义属性 indexAreaHeight 为 Index 及其活动区域设置高度

6使用自定义属性 tabList 设置数据源，根据数据源将自动生成对应数量的 Tab 和 Page

7按需选择可采用插槽 slot = "index" 或自定义属性 indexStyle 设置 Index 的样式

布局文件 indexwxml 中：

样式文件 indexwxss 中

布局文件 indexwxml 中

PS： 还有一个很重要的方法 onPageUpdata ，用于抽象节点 item-tab 和 item-page 通知父节点 tab-layout 刷新数据，在子控件中通过 thistriggerEvent("updata") 触发

可能出现问题：

1 当 item-page 中存在竖直滚动的 scroll-view 时出现滑动冲突该如何解决？

在 item-page 组件 attached 方法中按需为 scroll-view 设置固定高度或占满屏幕剩余位置 （点击跳转查看参考写法）

2当 item-page 或 item-tab 中调用 thissetData ( ) 之后，发现自定义属性 item 获取值为 null

出现该种情况，应在 thissetData ( ) 之后，执行 thistriggerEvent("updata") 触发 tab-layout 的 onPageUpdata 方法重新得到 item 值

3如何实现 " 懒加载 " ，即当 Tab 首次被选中时，才进行对应 Page 的数据加载？

为自定义组件 item-page 设置一个懒加载标志位暂定为 isLoadData ，通过订阅自定义属性 currentIndex ，在 currentIndex 属性变化或组件进行到 attached 生命周期时，通过判断 isLoadData 和 currentIndex 是否与 position 相等来进行数据加载并调整标志位 （点击跳转查看参考写法）

在小程序越来越普及的现状下，如何使得小程序能给用户带来更完善的显示效果和使用体验，是每一个开发者都应该力尽其责的事。鉴于本人当前对小程序和网页端的熟悉程度，该组件或许还存在很多瑕疵，如有更好的见解或建议，欢迎留言。

以上就是关于微信小程序模态框textarea能滚动的问题全部的内容，包括:微信小程序模态框textarea能滚动的问题、uni-app运行到H5正常，但运行到小程序不正常、报错总结、如何让微信小程序中间的图标也跟着图上下滑动等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！