微信小程序scroll-view的使用案例代码详解

scroll-view:滚动视图
使用view其实也能实现滚动,跟div用法差不多
scroll-viewview最大的区别就在于:scroll-view视图组件封装了滚动事件,监听滚动事件什么的直接写方法就行。

scroll-view纵向滚动添加属性scroll-y,然后写一个固定高度就行了,我主要说一下scroll-view的横向滚动scroll-x

我使用了display: flex;布局,特么的直接写在scroll-view上面,显示出来的结果总是不对头,试了好多次,得到了下面两种写法;

第二种在scroll-view上添加了enable-flex启用flex布局属性,启用后内部就能使用flex布局了,不然你会发现内部布局始终是纵向的。

得到的效果是一样的,能使用scroll-view事件。

wxml:

wxss:

效果图:

特么的水印

求推荐一款免费且没有水印的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就可以了

最后贴上代码:

 

发表评论

文章信息
字数 732
价格 免费
购买人数 0
作者信息
这个大佬什么都没有留下。