view布局-微信小程序

创建一个视图容器

view

(wxml)

<view class="box">这是一个view</view>

(wxss)

.box{
  width:200rpx;
  height:200rpx;
  color:red;  
  background:#c4c42e;
}

• hover-class
  指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
  (wxml)

<view class="box" 
      hover-class="boxHover">这是一个view</view>

(wxss)

.boxHover{
  background:#333332
}

表示在点击这个视图容器后，颜色会变化

• hover-start-time
  按住后多久出现点击态，单位毫秒，默认50毫秒
  （wxml)）

<view class="box" 
      hover-class="boxHover"
      hover-start-time="600">这是一个view</view>

• hover-stay-time
  手指松开后点击态保留时间，单位毫秒,默认400毫秒
  （wxml）

<view class="box" 
      hover-class="boxHover"
      hover-start-time="600"
      hover-stay-time="10">这是一个view</view>

** scroll-view**
可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 wxss设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
属性

• scroll-x：横向滑动
• scroll-y：纵向滑动
• scroll-left:横向开始位置
• scroll-top:纵向开始位置

swiper

滑块视图容器

常用属性：

• interval
  自动切换时间间隔
• indicator-dots
  是否显示面板指示点
• autoplay
  是否自动切换
• previous-margin
  前边距，可用于露出前一项的一小部分
• next-margin
  后边距，可用于露出后一项的一小部分
• vertical
  滑动方向是否为纵向

<swiper class="banner"
 indicator-dots autoplay interval="3000" 
 previous-margin="20" next-margin="20">
  <swiper-item class="banneritem">
    <image src="/images/-5ea90d93017a2443.jpg" mode="widthFix"></image>
  </swiper-item>
  <swiper-item class="banneritem">
    <image src="/images/OIP (1).jpg"></image>
  </swiper-item>
  <swiper-item class="banneritem">
    <image src="/images/-2a2968fde5eed219.jpg"></image>
  </swiper-item>
</swiper>