开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
文档中心
凯发app官方网站的技术支持 & 案例 faq 
支付宝小程序
案例分析
sdk & demo下载
常见问题
常用工具
iot小程序
运维保障
小程序 > 支付宝小程序 > 常见问题 > 视图组件常见问题
贡献者
收藏
我的文档
设置
view组件常见问题
如果需要使用滚动视图,请使用 scroll-view
不支持 view 组件覆盖 map 组件,可通过同层渲染实现 cover-view 覆盖 map 组件
如何阻止区域内滚动页面
要阻止 view 组件内的滚动页面,需要设置 view 组件的 disable-scroll 属性为 true。
javascript
复制代码
<view disable-scroll="{{true}}"><!-- 禁止view内的scroll-view组件滚动效果-->
<scroll-view scroll-y="{{true}}" style="height: 200px;">
<view style="background-color: green;height: 200px;"></view>
<view style="background-color: red;height: 200px;"></view>
<view style="background-color: green;height: 200px;"></view>
<view style="background-color: red;height: 200px;"></view>
<view style="background-color: green;height: 200px;"></view>
</scroll-view>view>
如何改变view的展示顺序
将两个模块嵌入到一个循环里面,每一个循环的小模块加一个类型值进行标识。
如何解决页面滚动时在不同屏幕滚动到的位置不同
按照屏幕的比例计算,换算跳转位置 。
固定一个滑动位置,在该位置写入一个 view,通过计算这个 view 到顶部距离,进行跳转。
如何动态修改class样式
1通过三元运算符实现:
javascript
复制代码
<view class="{{条件表达式 ? 'classa' : 'classb'}}"></view>
2通过 setdata 动态修改样式,但只能使用 style 行内样式实现:
如何防止连续快速点击事件
参考 如何防止连续快速点击事件
swiper组件常见问题
swiper 组件不可以放在地图上使用,map 组件是由客户端创建的原生组件,原生组件的层级是最高的,所以页面中的其它组件无论设置 z-index 为多少,都无法在原生组件之上。
去除 previous-margin 和 next-margin 的设置距离可删除 swiper 组件左右空白距离。
swiper 组件的首张图片与左边的间隔可以和组件中 item 的图片间隔保持一致,可以根据 previous-margin 设置一下前边距。
调用 swiper 组件,swiper-item 嵌套 cover-view 会导致最后一个 swiper-item 后有很大的空白,建议使用 view 做嵌套。
swiper 可以有多个 swiper-item,但是前台展示的只有一个。
swiper手动滑动
swiper 滑块视图容器中 autoplay 的值设置为 false,即可关闭自动轮播滚动。
swiper组件自定义高度没有效果
swiper 组件不支持自定义高度,swiper 高度可以通过设置 swiper item 元素高度来控制,swiper-item 的高度取决于第一个 swiper-item 的高度,可通过设置第一个swiper-item中顶层元素的高度达到效果。
地图中可以使用swiper组件吗
swiper 组件目前不支持在地图中使用。
swiper-item手动设置key
swiper-item 支持手动设置 key,但是设置的 key 无实际效果。小程序设置轮播展示的 swiper-item,只需要设置 current 参数,current 就是当前展示的 swiper-item 的 index 值。
swiper-item组件点击事件不生效
swiper-item 组件没有 ontap 点击事件。建议内套一个 view 组件,ontap 点击事件放在 view 组件上实现。
scroll-view组件常见问题
使用竖向滚动时,需要指定固定高度,可通过 acss 设置 height。
scroll-into-view 的优先级高于 scroll-top。
在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,无法触发 onpulldownrefresh 下拉刷新功能。
scroll-view 不支持 scroll-x=true 和 scroll-y=true 同时生效,只能用一个。可以使用 view 设置 disable-scroll 为 true 禁止滑动。
scroll-view 满屏时,无法滑动页面,会导致导航栏滑动透明失效。可通过 my.setnavigationbar 设置导航栏样式:导航栏标题、导航栏背景色、导航栏底部边框颜色、导航栏左上角 logo 图片。
可以监听 scrollview 父 view 的触摸事件控制 scrollview 的滑动来达到取消惯性的效果。
scroll-view 组件不支持自定义下拉刷新以及滚动条。
scroll-view如何隐藏滚动条
滚动条无法隐藏,可以全局禁用滚动,但是无法禁用 scroll-view 中的滚动距离展示。
获取scrollview的高度
获取 scrollview 的高度可以通过节点查询来实现。
弹出层滚动穿透
scroll-view 在 popup 扩展组件中无法滑动。弹出层滚动穿透。
问题原因:
此问题多为组件嵌套导致。例如: view 中嵌套 view 等。
解决方法:
popup 组件上加上 disablescroll={{false}} 属性才能滑动。
外层 view 设置 disable-scroll 为 true 时可禁止内部的滚动。
在外层 view 上阻止 touch 事件冒泡即可:catchtouchstart、catchtouchmove。
scrollview是否支持同时横向纵向滑动
scroll-view 不支持同时横向纵向滑动,scroll-x=true 和 scroll-y=true 不能同时生效只能用一个。可以用 view 设置 disable-scroll 为 true 去实现滑动。
scroll-view中scroll-into-view自动滚动无效
检查 scroll-x 或 scroll-y 是否开启滚动,竖向滚动时检查是否有指定 scroll-view 固定高度。
检查 scroll-view 的子元素 id 是否正确设置,scroll-into-view 设置的是否是子元素i d。
建议使用 ide 工具创建一个模板 api-demo 实例项目,参考里面 scroll-view 的写法。
竖向滚动onscroll不生效
scroll-view 使用竖向滚动时,需要给一个固定高度值后 onscroll 函数才能生效,通过 acss 设置 height。
scroll-view的onscrolltolower没有回调
scroll-view 使用竖向滚动时,需要指定固定高度,可通过 acss 设置 height,如 height: 500rpx; 才能正常回调。
监听scroll-view滚动到底部
可以直接在 onscroll 方法中进行处理,使用 onscrolltolower 监听 scroll-view 的滚动高度来进行判断是否滑动到了底部。
scrollheight 是 scroll-view 里面所有 view 的高度和,scrolltop 是滚动的值。
滚动到底部:scrolltop 的值等于 scrollheight-scrollview 视图的高度。
scroll-view 中的scroll-animation-duration默认时间是多少
scroll-view 中的 scroll-animation-duration 值是根据代码动态计算的,不是固定的默认值。
小程序跳转锚点
可通过scrollview组件实现小程序跳转到指定锚点的功能,利用scrollview组件的scroll-into-view属性设置值为某子元素id,则滚动到该元素,元素顶部对齐滚动区域顶部。
使用swiper嵌套scroll-view为何scroll-view无法滑动
swiper 和 scroll-view 均为滑动组件,如果必须使用,建议不做嵌套或者让 scroll-view 阻止 touch 事件冒泡即可:catchtouchstart、catchtouchmove。
scroll-view做滚动吸顶效果会卡顿
卡顿是因为在滚动监听中做判断和赋值导致,建议通过设置 upper-threshold 属性来实现滚动吸顶效果。
cover-view、cover-image组件常见问题
版本要求:基础库 1.10.0 或更高版本;若版本较低,建议做 兼容处理
注意:实际效果请以真机为准。
cover-view标签嵌套不支持button吗
小程序组件 cover-view 支持嵌套组件 button 在其中使用。
示例代码:
cover-view默认背景白色如何取消
不支持更改背景色,建议更改字体颜色。
cover-view是否支持圆角和阴影
小程序 acss 支持圆角和阴影,示例代码:
圆角:border-radius: 15%;
阴影:box-shadow: 10px 10px 5px #888888;
cover-view是否可以嵌套cover-image
cover-view支持嵌套cover-image
小程序cover-view是否支持touch事件和动画
小程序 cover-view 不支持 touch 事件和不支持 my.createanimation 动画。
cover-image被webview覆盖
web-view 会自动铺满整个页面,并覆盖其它组件。请不要在使用 web-view 组件页面中使用其它组件。
cover-image如何使图片的宽高完全拉伸至填满icover-mage元素
通过设置class样式可拉伸填满图片。
如何实现在map上添加一个图标
可以使用 cover-image 来实现 map 之上显示图片的效果,使用 cover-view 在 map 之上显示文字的效果。
movable-area、movable-view组件常见问题
movable-area 必须设置 width 和 height 属性,不设置默认为 10px。
movable-view 必须设置 width 和 height 属性,不设置默认为 10px。
movable-view 默认为绝对定位(请不要修改),top 和 left 属性为 0px。
当 movable-view 小于 movable-area 时,movable-view 的移动范围是在 movable-area 内;当 movable-view 大于 movable-area 时,movable-view 的移动范围必须包含 movable-area (x 轴方向和 y 轴方向分开考虑)。
movable-view 必须在 movable-area 组件中,并且必须是直接子节点,否则不能移动。
movable-area组件是否支持scale-area
movable-area 组件目前支持 scale-area 属性,当 movable-view 设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个 movable-area。
拖拽组件在屏幕中移动的实现
拖拽组件效果可通过 movable-area 可移动视图区域实现,具体参考 小程序实现拖拽排序
内容没有解决您的问题?您还可以前往 或 寻求帮助
凯发k8官方网娱乐官方 copyright © 2022 支付宝(杭州)信息技术有限公司  | icp证浙b2-20160559
该文档对你是否有帮助?
当前页面目录
网站地图