主页 > 前端 > javascript >
来源:自学PHP网 时间:2020-07-14 17:27 作者:小飞侠 阅读:次
[导读] 微信小程序 scroll-view的使用案例代码详解...
我使用了 第二种在scroll-view上添加了 得到的效果是一样的,能使用scroll-view事件。 wxml:
或
wxss: .order_item_body{ width: 100%; height: 196rpx; } .order_item_list{ /* width: 100%; */ height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; /* border: 1px solid blue; */ } .order_item_goods { width: 200rpx; height: 192rpx; position: relative; } .order_item_goods>image { width: 160rpx; height: 160rpx; margin: 16rpx 20rpx; border: 1px solid rgba(0, 0, 0, 0.5); } .order_item_goods>text { height: 30rpx; line-height: 30rpx; padding: 0rpx 5rpx; font-size: 24rpx; color: rgba(255, 255, 255); border-top-left-radius: 10rpx; background-color: rgba(0, 0, 0, 0.5); position: absolute; bottom: 16rpx; right: 20rpx; } 效果图: 求推荐一款免费且没有水印的gif制作软件,有水印看到就烦。 ps:下面看下微信小程序scroll-view的scroll-into-view无效如何解决 最近在写小程序项目遇到这么一个问题:在使用scroll-into-view的时候无效。 在网上查了一遍,给出的答案有: 1.给scroll-view要设置高度,必须设置上scroll-y或者scroll-x为true(必须要的) 2.scroll-into-view初始化设置的时候,可能因为页面或者数据未加载不能跳转。需要在js里手动setData一下。 一顿操作猛如虎,一看还是没有效果。还是接着找原因吧。。 最后发现,原来是在给scroll-view设置高度的时候,不能用%来设置高度,改成固定高度类似500rpx就可以了 最后贴上代码:
总结 到此这篇关于微信小程序 scroll-view的使用案例代码详解的文章就介绍到这了,更多相关微信小程序 scroll-view的使用 内容请搜索自学php网以前的文章或继续浏览下面的相关文章希望大家以后多多支持自学php网! |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com