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

原创

Gorit 2021-09-03 14:55:17 博主文章分类：微信小程序 ©著作权

文章标签 xml 小程序微信初始化基本属性 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者Gorit的原创作品，请联系作者获取转载授权，否则将追究法律责任

view 视图组件学习

一、view 视图容器的基本属性
- - 1.1 属性介绍
  - 1.2 示例
二、scoll - 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 横向滚动设计

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

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

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

先给大家看一下效果
手把手带你学习微信小程序 —— 七（view 视图组件学习）_xml_02

代码如下：
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 纵向向滚动设计

纵向滚动有两个要点：

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

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

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;
}