提交 57eeb53c 编写于 作者: taohebin@dcloud.io's avatar taohebin@dcloud.io

feat: 增加list-view复用input的示例

上级 e7d7e00e
......@@ -1172,6 +1172,14 @@
"navigationBarTitleText": "权限申请监听",
"enablePullDownRefresh": false
}
},
{
"path" : "pages/component/list-view/list-view-multiplex-input",
"style" :
{
"navigationBarTitleText" : "list-view复用input",
"enablePullDownRefresh" : false
}
}
// #endif
],
......
<template>
<scroll-view direction="horizontal" style="flex-direction: row;">
<button class="button_item" @click="delayShow">测试延时显示</button>
</scroll-view>
<list-view v-show="list_show" id="listview" style="flex: 1;" show-scrollbar=false @scrolltolower="onScrollTolower">
<list-item v-for="index in item_count" class="item" @click="itemClick(index)">
<text >item-------<text>{{index}}</text></text>
<input :placeholder="index" :value= "index ==1 ? `第一个` :index "/>
</list-item>
</list-view>
</template>
<script>
export default {
data() {
return {
item_count: 20,
list_show: true,
listViewElement: null as UniListViewElement|null
}
},
onReady() {
this.listViewElement = uni.getElementById<UniListViewElement>('listview')
},
methods: {
onScrollTolower(_: ScrollToLowerEvent) {
setTimeout(() => {
this.item_count += 20
}, 300)
},
itemClick(index: number) {
console.log("itemTextClick---"+index)
},
delayShow() {
this.list_show = !this.list_show
this.item_count += 20
//延时显示list-view 测试list-item延时显示bug
setTimeout(()=>{
this.list_show = !this.list_show
}, 400)
}
}
}
</script>
<style>
.item {
padding: 15px;
margin: 5px 0;
background-color: #fff;
border-radius: 5px;
}
.button_item {
width: 200px;
}
</style>
......@@ -188,6 +188,11 @@
list-view 对list-item复用测试
</button>
</navigator>
<navigator url="/pages/component/list-view/list-view-multiplex-input" hover-class="none">
<button type="primary" class="button">
list-view 复用测试(item中嵌入input)
</button>
</navigator>
</view>
</scroll-view>
</template>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册