脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序组件

微信小程序学习之常用的视图组件

 更新时间：2022年11月07日 11:44:11   作者：瘾ิۣۖิۣۖิۣۖิꦿ  
但是最近由于开发人手不够,一个人开启全栈,一边写接口一边写页面,刚好项目中有一个需求,所以尝试使用自定义组件开发这块,下面这篇文章主要给大家介绍了关于微信小程序学习之常用的视图组件的相关资料,需要的朋友可以参考下

一.常用的视图组件

1.view

  • 普通视图区域
  • 类似与HTML中的div，是一个块级元素
  • 常用来实现页面的布局效果

 使用效果：

wxml文件：

<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

 wxss文件：

.container1 view{
    width: 100px;/*宽*/
    height: 100px;/*高*/
    text-align: center;/*居中*/
    line-height: 100px;/*纵向居中*/
}
.container1 view:nth-child(1){
  background-color: lightblue;
}
.container1 view:nth-child(2){
  background-color: lightgreen;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}
/*给三个view加上不同的颜色*/
.container1{
  display: flex;/*将三个view横向排列*/
  justify-content: space-around;/*横向分散对其齐*/
}

效果图：

2.scroll-view

  • 可滚动的视图区域
  • 常用来实现滚动列表效果

 使用效果：

wxml文件：

<!-- scroll-y属性：允许纵向滚动 -->
<!-- scroll-x属性：允许横向滚动 -->
<!-- 注意：使用竖向滚动时，必须给scroll-view一个固定高度 -->
<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

 wxss文件：

.container1 view{
    width: 100px;/*宽*/
    height: 100px;/*高*/
    text-align: center;/*居中*/
    line-height: 100px;/*纵向居中*/
}
.container1 view:nth-child(1){
  background-color: lightblue;
}
.container1 view:nth-child(2){
  background-color: lightgreen;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}
/*给三个view加上不同的颜色*/
.container1{
  border: 1px solid red;
  /*给scroll-view一个固定高度*/
  height: 120px;
  width: 100px;
}

效果图：

可以使用鼠标上下拖动，达到滚动的效果！  

3.swiper和swiper-item

轮播图容器组件和轮播图item组件

 使用效果：

wxml文件：

<!-- 轮播图区域 -->
<!-- indicator-dots 属性：显示面板指示点 -->
<swiper class="swiper-container">
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

 wxss文件：

.swiper-container{
  height: 150px;/*轮播图高度*/
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
 
swiper-item:nth-child(1) .item{
  background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
  background-color: lightblue;
}
swiper-item:nth-child(3) .item{
  background-color: lightcoral;
}

效果图：

l circular实现衔接滑动，滑倒C，往右滑动回到A，类似循环队列！！

 例如：加上 indicator-dots 属性

<!-- 轮播图区域 -->
<!-- indicator-dots 属性：显示面板指示点 -->
<swiper class="swiper-container" indicator-dots>
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

效果图：可与上进行对比

4.text

  • 文本组件
  • 类似与HTML中的span标签，是一个行内元素

使用效果：

wxml文件：

<view>
  手机号支持长按选中保存
  <text selectable>18814231000</text>
</view>
<!-- 只有在text中的文本才能长按保存(必须加上selectable)，view中不可长按保存 -->

 效果图：

5.rich-text 

  • 富文本组件
  • 支持把HTML字符串渲染为WXML结构

 通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构：

wxml文件：

<view>
  手机号支持长按选中保存
  <text selectable>18814231000</text>
</view>
<!-- 只有在text中的文本才能长按保存(必须加上selectable)，view中不可长按保存 -->
<rich-text nodes="<h1 style='color:red;'>标题<h1>"></rich-text>

效果图：

6.button

  • 按钮组件
  • 功能比HTML中的button按钮丰富
  • 通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权等）

使用效果：

wxml文件：

<!-- 按钮组件的基本使用 -->
<!-- 通过type属性指定按钮颜色类型 -->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
 
<!-- size="mini" 小尺寸按钮 -->
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
 
<!-- plain 镂空按钮 -->
<button size="mini" plain>普通按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

 效果图：

7.image

  • 图片组件
  • image组件默认高度约300px、高度约240px

使用效果：

wxml文件：

<!-- image 图片组件 -->
<image></image>
<image src="/images/123.jpg"></image>

wxss文件：

image{
  border: 1px solid red;
}

效果图：

 例如更改属性mode为aspectFit，自适应的，效果图：

<!-- image 图片组件 -->
<image></image>
<image src="/images/123.jpg" mode="aspectFit"></image>

8.navigator

  • 页面导航组件
  • 类似于HTML中的a链接

总结

到此这篇关于微信小程序学习之常用的视图组件的文章就介绍到这了,更多相关微信小程序组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论