weex横向列表

 

实现左右滑动的列表，我这边使用 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>