HTML代码
<view class='content'>
<scroll-view class="box" ref='box' :scroll-y="true" @scrolltoupper='onScrolltoupper'>
<view class="btn" v-for="(item,index) in lists" :key='item.id'>
{{item.name}}
</view>
</scroll-view>
<view class="btn" @tap='onAdd' style="background-color: #0071FF;margin-top: 100rpx;">
添加
</view>
</view> script代码
export default{
data(){
return{
lists:[
{name:'这是个1',id:1},
{name:'这是个2',id:2},
{name:'这是个3',id:3},
{name:'这是个4',id:4},
{name:'这是个5',id:5},
{name:'这是个6',id:6},
{name:'这是个7',id:7},
{name:'这是个8',id:8},
{name:'这是个9',id:9},
{name:'这是个10',id:10}
],
num:0,
top:0
}
},
methods:{
onAdd(){
this.lists.unshift({
"name": "兔兔"+this.num,
"id":this.lists.length+1
});
this.num++;
console.log(this.lists)
},
}
} CSS代码
.btn{
width: 750rpx;
height: 100rpx;
background: yellow;
margin-top: 20rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
font-weight: bold;
}
.content{
width: 750rpx;
height: 100vh;//nvue中改成flex: 1;
background-color: pink;
display: flex;
flex-direction: column;
}
.box{
width: 750rpx;
height: 800rpx;
background-color: blue;
}
.sec{
width: 750rpx;
height: 100%;
background-color: red;
}
0 个回复