提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  APP

当前栏目

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

微信 学习 程序
2023-04-18 14:49:29 时间

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上了，前面几次的项目我也上传到上面了，大家有需要可以自取 传送门

相关文章