亲宝软件园·资讯

展开

小程序视图容器和内容组件

前端小刘不怕牛牛 人气:0

前言

开发者可以通过运用组件快速搭建出页面结构,上一章也有对组件进行介绍,那么本文牛牛就来带大家学习小程序的组件。

我们可以将组件理解为微信内嵌的标签,它在小程序承担的作用与HTML的标签一致,不过组件的功能更加多样、具体。

事不宜迟,让我们开冲!

一,视图容器类组件

1.1 view

普通视图容器,在微信小程序中,view就相当于HTML中的div标签,属于块级元素

view由于其无意义性,经常用来做小程序大体框架的布局

栗子:

如下实现纵向布局

wxml文件

<view class="column">
  <view class="view-1 box"></view>
  <view class="view-2 box"></view>
  <view class="view-3 box"></view>
</view>

wxss文件

.column{
  margin: 0 auto;
  width: 100px;
}
.view-1{
  background-color: lightblue;
}
.view-2{
  background-color: lightcoral;
}
.view-3{
  background-color: lightgreen;
}
.box{
  width: 100px;
  height: 100px;
}

view组件没有什么默认的样式,非常适合作为布局结构使用,如网格布局,flex布局等等。

效果:

1.2 srcoll-view

bindscrolltoupper和bindscrolltolower一般配合事件绑定一起使用,事件就是渲染层与逻辑层的通信,用户在渲染层产生的行为,逻辑层对该行为进行相应。

栗子:

wxml文件

<scroll-view class="scroll" scroll-y>
  <view class="box view-1"></view>
  <view class="box view-2"></view>
  <view class="box view-3"></view>
</scroll-view>

wxss文件

.scroll{
  width: 100px;
  height: 120px;
}
.box{
  width: 100px;
  height: 100px;
}
.view-1{
  background-color: lightgreen;
}
.view-2{
  background-color: lightpink;
}
.view-3{
  background-color: lightskyblue;
}

效果:

请添加图片描述

当然你可以将scroll-y属性改为scroll-x,实现横向滚动

1.3 swiper和swiper-item

轮播图栗子:

wxml文件

<swiper class="container" indicator-dots="true" autoplay="true" circular="true" >
<swiper-item class="box item-1">
<view></view>
</swiper-item>
<swiper-item class="box item-2">
<view></view>
</swiper-item>
<swiper-item class="box item-3">
<view></view>
</swiper-item>
</swiper>

wxss文件

.container{
  height: 200px;
}
.box{
  height: 100%;
}
.item-1{
  background-color: lightgreen;
}
.item-2{
  background-color: lightpink;
}
.item-3{
  background-color: lightgray;
}

就这样,我们就实现了轮播图,相比于在网页用JS的复杂操作,这种低代码实现是不是很舒服,为了提高效率,低代码也将是未来的趋势

效果:

请添加图片描述

视图容器组件还有像可拖拽视图movable-area,弹窗视图page-container,感兴趣可以了解一下

二,基本内容组件

2.1 text

2.2 rich-text

内容描述为富文本,我们可以通过其中的nodes属性,把HTML字符串渲染成对应的UI结构

如下所示:

<rich-text nodes="<h1 style='color: lightblue'>标题</h1>"></rich-text>

效果如下:

总结

加载全部内容

相关教程
猜你喜欢
用户评论