实现左右滑动的列表,我这边使用 weex的 Scorller组件:
从weex文档上找到依据:http://dotwe.org/vue/c626a5fb4981e8e8bce92d7b012c26b4
vue文件中使用:
重点:
<scroller scroll-direction="horizontal" style="flex-direction: row">
<div style="background-color: white;height: 80px;padding-left: 24px">
<scroller scroll-direction="horizontal" style="flex-direction: row">
<div v-for="(item,index) in orgTagList">
<div style="height: 88px;align-items: center;flex-direction: row">
<text v-if="orgTagList.length-1 === index " style="line-height:88px; font-size: 30px;color: #999;">{{item.name}}</text>
<text v-else style="font-size: 30px;color: #0a3470;line-height:88px; " @click="tagClick(item)">{{item.name}}</text>
<text v-if="orgTagList.length-1 !== index " style="font-weight:bold; line-height:88px;width: 37px; font-size: 30px;color: #999;margin-left: 5px;margin-right: 5px">→</text>
</div>
</div>
</scroller>
</div>
测试数据:
let iii = { name:'小明' };
let ddd = { name:'王丽' };
let fff = { name:'婷婷' };
let ggg = { name:'风儿' };
let hhh = { name:'弈可' };
this.orgTagList.push(iii);
this.orgTagList.push(ddd);
this.orgTagList.push(fff);
this.orgTagList.push(ggg);
this.orgTagList.push(hhh);
this.orgTagList.push(ddd);
this.orgTagList.push(fff);
this.orgTagList.push(ggg);
this.orgTagList.push(hhh);
补充使用bug:(android weex-sdk 20.0以上,如上面这样写会出现,弹出去的数据,view依然站位的情况):
scroller 标签里边,就只能有一个div标签,然后设置div style="flex-direction: row"
这样写即可:
<scroller scroll-direction="horizontal" style="flex-direction: row"> <div style="flex-direction: row"> <div v-for="(item,index) in options">
</div> </div> </scroller>