|
- <template>
- <scroll-view class="main" scroll-y>
- <text v-show="!isshow" class="title">水平布局</text>
- <view class="horizontal">
- <view class="item red"></view>
- <view class="item green"></view>
- <view class="item blue"></view>
- </view>
- <text v-show="isshow" class="title">垂直布局</text>
- <view class="vertical">
- <view class="item red"></view>
- <view class="item green"></view>
- <view class="item blue"></view>
- </view>
- </scroll-view>
- </template>
- <style>
- .main {
- width: 100%;
- height: 100%;
- }
- .title {
- padding: 10px 0;
- font-size: 20px;
- }
- .horizontal {
- flex-direction: row;
- width: 300px;
- height: 200px;
- }
- .vertical {
- flex-direction: column;
- width: 200px;
- height: 300px;
- }
- .item {
- flex: 1;
- }
- .red {
- background-color: #f00;
- }
- .green {
- background-color: #0f0;
- }
- .blue {
- background-color: #00f;
- }
- </style>
- <script>
- export default {
- name: 'test',
- data() {
- return {
- isshow : true
- }
- },
- apiready(){
- console.log(123);
- this.data.isshow = false
- },
- methods: {
- }
- }
- </script>
复制代码 |
|