微信小程序中scroll-into-view跳转到指定位置是这样使用的:
1、首先第一步,打开微信开发者工具。
2、其次第二步,打开wxml文件,然后在文件里先新建一个scroll-view的标签即可。
3、再次第三步,设置这个scroll-into-view滚动的方向设置为x轴,与此同时设置scroll-into-view的值,这个值就是子元素中的id,表示滚动到哪一个元素,如下图所示。
4、接下来就是设置子元素,先新建一个view的子元素,然后设置class和id,并且多设置几个view标签,以便观察效果。
5、最后一步,点击打开模拟器,在下面我们就可以看到滚动的元素,接着就按照我们之前设置的显示就行了。
在微信小程序开发过程中,我们会经常使用到scroll-view组件,有时我们要在scroll-view中水平显示列表,类似这样:
但是当我们设置了scroll-view的flex-direction:row等属性时,会发现没有用,列表依然垂直显示,像这样:
主要是因为display:flex等属性对于scroll-view来说是没有用的,此时我们只需要设置子试图的属性display: inline-block即可,不需要设置scroll-view的flex属性。
但是当我们设置完成后可能会出现一下情况:
会发现列表好像没有对齐,有两个子试图错位了,接下来我们可以通过设置子属性vertical-align:top来解决,最后会得到我们想要的效果。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)