最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

weex页面上划动,固定header

XAMPP新闻 admin 939浏览 0评论

注:请在手机上扫描预览效果(支持ios、android)

<template>
<scroller>
<header class=”search”>
<text class=”text”>sdasxxxxxxxx</text>
</header>
<list>
<template v-for=”(index, i) in lists”>
<header :key=”`${index}-header`” v-if=”i%2===0 && i != 0″>
<text class=”banner”>{{index}} HEADER</text>
</header>
<cell :key=”index”>
<div class=”panel”>
<text class=”text”>{{index}}</text>
</div>
</cell>
</template>
</list>
</scroller>
</template>

<script>
export default {
data () {
return {
lists: [
‘First’, ‘Second’, ‘Third’, ‘Fourth’,
‘Fifth’, ‘Sixth’, ‘Seventh’, ‘Eighth’
]
}
}
}
</script>

<style scoped>
.search{
background-color: red;
opacity: .1;
background-color: rgba(0,0,0,0.6)
}
.search .text{
background-color: rgba(0,0,0,0.6)

}
.banner {
width: 750px;
padding: 25px;
font-size: 60px;
text-align: center;
font-weight: bold;
color: #41B883;
background-color: rgb(162, 217, 192);
}
.panel {
width: 600px;
height: 300px;
margin-left: 75px;
margin-top: 35px;
margin-bottom: 35px;
flex-direction: column;
justify-content: center;
border-width: 2px;
border-style: solid;
border-color: rgb(162, 217, 192);
background-color: rgba(162, 217, 192, 0.2);
}
.text {
font-size: 50px;
text-align: center;
color: #41B883;
}
</style>

转载请注明:XAMPP中文组官网 » weex页面上划动,固定header

您必须 登录 才能发表评论!