微信小程序-scroll-view横向滑动

需求要做可横向滑动的多个标签选项,具体实现效果如图:

为了实现这个效果,我前后写了两种布局代码.发出来给大家比较一下.

代码一:

WXML:

WXSS:

这种方法写出来,在低于iOS10.0版本以下系统会出现不可以滑动的问题.并且并未找到解决方案..苦思许久,还是换种写法算了.下面是写法二:

代码二:

WXML:

WXSS:

两种写法的区别在于:在代码一中,scroll-view中先创建一个view,并且使用flex布局,再在这个view中根据标签循环创建view.代码二,直接在scroll-view中循环创建view,但是scroll-view要添加white-space:nowarp,创建的view必须为display:inline-block.

因为代码一的写法会引起部分机型显示错误.所以我还是先选择第二种写法.也就是说,在设置scoll-view横向滑动时,要在scroll-view的css中添加white-space:nowrap,还要在scroll-view中创建的view的css中添加display:inline-block.这样就可以啦.具体代码如上,大家可参考.

代码一中的问题,希望可以有大神看到帮助解答.谢谢啦.