手把手带你学习微信小程序 —— 七 （view 视图组件学习）

配合官方文档学习，效果更佳呦

传送门

一、view 视图容器的基本属性

1.1 属性介绍

属性	功能
hover-class	配置该组件是否可以被点击 触发
hover-start-time	配置该组件被鼠标点击响应的时间产生对应的效果
hover-stay-time	配置该组件 停止点击后 保留此状态的时间
hover-stop-propagation	这个需要两个 view 组件进行配合才有与之对应的效果

1.2 示例

不说多的，创建一个新的小程序项目，然后我们直接在 index.wxml 和 index.wxss 进行修改

index.wxml

/*这里创建两个方框组件， outter 是外边的大边框， inner 是内边框*/
 <view class='outter' hover-class='outter-hover' hover-start-time='0' hover-stay-time='500'  hover-stop-propagation='false'> 
  <view class='inner' hover-class='inner-hover' hover-stop-propagation='false'></view>
</view>

index.wxss

/*配置外边框的大小为 200px 像素 的正方形，颜色为黄绿色 */
.outter{
  width: 200px;
  height: 200px;
  background: greenyellow;
}
/*配置外边框被点击后的效果，大小会变成 150px 像素的正方形，颜色变成红色*/
.outter-hover{
  background: red;
  width: 150px;
  height: 150px;
}
/*配置内边框的大小为 100px 像素大小的方框，颜色为 紫色*/
.inner{
  width: 100px;
  height: 100px;
  background: purple;
}
/*配置内边框被点击后事件 大小变成 50px 像素的正方形，颜色变成蓝色*/
.inner-hover{
  width: 50px;
  height: 50px;
  background: blue;
}

运行效果如下：

具体需要修改的地方就是属性中的参数值，这个根据官方文档进行微调即可

二、scoll - view 标签

2.1 横向滚动设计

大家应该都体验过横向滚动栏和纵向滚动栏，如果没有，今天我没呢就用小程序把它实现一下

首先横向滚动有三个要点：

1. 在 scoll-view 标签汇总 设置属性 scroll-x 设置横向滚动（布尔值改为 true）
2. 在 wxss 样式当中设置 scroll-view 的样式 whitespace : nowrap 【设置 禁止换行】
3. 在 wxss 样式 当中设置 小方块的样式的布局 display:inline-block

先给大家看一下效果

代码如下：
index.wxml

<scroll-view class='scroll-view' scroll-x="{{true}}">
  <view class='id by_red'>我是红色</view>
  <view class='id by_yellow'>我是黄色</view>
  <view class='id by_green'>我是绿色</view>
  <view class='id by_purple'>我是紫色</view>
  <view class='id by_pink'>我是粉色</view>
  <view class='id by_grey'>我是灰色</view>
</scroll-view>

index.wxss

.scroll-view{
  width: 100%;
  height: 200px;
  background: wheat;
    /*设置二 防止换行 */
  white-space: nowrap;
}

.id{
  /* 设置三  */
  display: inline-block;

  height: 100px;
  width: 100px;
}

.by_red{
  background: red;
}

.by_yellow{
  background: yellow;
}

.by_green{
  background: green;
}

.by_purple{
  background: purple;
}

.by_grey{
  background: grey;
}

.by_pink{
  background: pink;
}

2.2 纵向向滚动设计

纵向滚动有两个要点：

1. scroll-view 添加 scroll-y="{{true}}" 属性
2. 给 scroll-view 设置高度

效果图：

index.wxml

<scroll-view class='scroll-view-y' scroll-y="{{true}}">
  <view class='id1 by_red'>我是红色</view>
  <view class='id1 by_yellow'>我是黄色</view>
  <view class='id1 by_green'>我是绿色</view>
  <view class='id1 by_grey'>我是灰色</view>
</scroll-view>

index.wxss

.scroll-view-y{
  width: 100%;
  height: 100px;
  background: whitesmoke;
  margin-top: 50px;
}

.id1{
  height: 100px;
  width: 100%;
}

.by_red{
  background: red;
}

.by_yellow{
  background: yellow;
}

.by_green{
  background: green;
}

.by_purple{
  background: purple;
}

.by_grey{
  background: grey;
}

.by_pink{
  background: pink;
}

2.3 scroll-view其他属性

其他属性

1. 初始化纵向标签展示的位置 scroll-top="50"
2. 初始化横向标签展示的位置 scroll-left="50"
3. 还有事件绑定界面，比如 bindscrolltoupper （滚到左边或者上边的位置触发）等等，更多的内容见官方文档进行尝试
4. 有一个地方需要注意，对于位置指向标签，一次只能使用一个，比如 scroll-into-view （需要与 id 配合使用） 和 1，2点就不能一起使用

三、微信红包案例实现

运行效果

实现一个动态变化效果，项目资源我已经上传到github上了，前面几次的项目我也上传到上面了，大家有需要可以自取
传送门