需求要做可横向滑动的多个标签选项,具体实现效果如图:
为了实现这个效果,我前后写了两种布局代码.发出来给大家比较一下.
代码一:
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.这样就可以啦.具体代码如上,大家可参考.
代码一中的问题,希望可以有大神看到帮助解答.谢谢啦.