uni-app小结(1)

常用视觉容器 : view,scroll-view,swiper

1.view

相当于HTML中的div,独占一行，不设置宽度时，宽占满整个屏幕。

2.scroll-swiper

可滚动视图区域，用于区域滚动。

       <!-- scroll-x:true 允许横向滚动 scroll-left:设置横向滚动条位置 -->
        <scroll-view class="scroll-view" scroll-x="true"  scroll-left="100%">
            <view class="blue">A</view>
            <view class="red">B</view>
            <view class="green">C</view>
        </scroll-view><br>
        <!-- scroll-x:true 允许纵向滚动 -->
        <scroll-view class="scroll-Y" scroll-y="true" @scrolltolower="scrolltolower">
            <view class="blue">A</view>
            <view class="red">B</view>
            <view class="green">C</view>
        </scroll-view><br>

3.swiper

一般用于左右滑动或上下滑动，比如banner轮播图。

    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
        <swiper-item>
            <view class="swiper-item-red"></view>
        </swiper-item>
        <swiper-item>
            <view class="swiper-item-blue"></view>
        </swiper-item>
        <swiper-item>
            <view class="swiper-item-green"></view>
        </swiper-item>
    </swiper><br>

<style>
    .swiper .swiper-item-red{
        width: 100%;
        height: 300rpx;
        background-color: #F76260;
    }
    .swiper .swiper-item-blue{
        width: 100%;
        height: 300rpx;
        background-color: #007AFF;
    }
    .swiper .swiper-item-green{
        width: 100%;
        height: 300rpx;
        background-color: #09BB07;
    }
</style>

实现效果如下图：

视觉容器

常用表单组件: button,checkbox,input,lablel,switch

1.button 按钮

type属性：default,primary,warn.

2.checkbox 多选框

多项选择器，内部由多个 checkbox 组成。

//获取 checkbox的value值的方式
checkbox(e){
    console.log(e.detail.value)//获取所选复选框的值
    let str=e.detail.value.toString()
    console.log(str)
}

3.input 输入框

type类型：text,number,idcard.

//获取 input的value值的方式
onKeyInput(e){
     this.inputValue=e.detail.value
},

4.lablel 组件

用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。

5.switch 开关选择器

<view>
      <switch checked="true" @change="switchChange" />
</view>

    //获取switch的状态
    switchChange(e){
        console.log(e.detail.value)
    },