微信小程序开发---基本组件的使用

目录

一、scroll-view

(1)作用

(2)用法

二、swiper和swiper-item

(1)作用

(2)用法

三、text

(1)作用

(2)使用

四、rich-text

(1)作用

(2)使用

五、button

(1)作用

(2)使用

六、image

(1)作用

(2)使用


前言:

本文主要介绍刚学习微信小程序需要学习的一些基本组件

一、scroll-view

(1)作用

可滚动的视图区域,常用来实现滚动列表效果(有横向滚动和纵向滚动)

(2)用法

javascript 复制代码
//wxml文件
<scroll-view class="scrollcon" scroll-y>    //这里scroll-y表示纵向滚动
  <view>A</view>                            //换成scroll-x表示横向滚动
  <view>B</view>
  <view>C</view>
</scroll-view>
javascript 复制代码
/**index.wxss**/

.scrollcon view{
  /* 这里设置的宽高表示的是包含的这个ABC*/
  width: 200px;
  height: 100px;
  text-align: center;
}

.scrollcon view:nth-child(1){
  background-color: lightcoral;
}

.scrollcon view:nth-child(2){
  background-color: lightgreen;
}

.scrollcon view:nth-child(3){
  background-color: lightseagreen;
}

.scrollcon{
  /* 这里设置的宽高是纵向滚动的这个列表*/
  height: 200px;
  width: 200px;
  border: 1px solid red;
}

二、swiper和swiper-item

(1)作用

实现轮播图的效果

(2)用法

javascript 复制代码
<swiper class="swip" indicator-dots indicator-color="white">
<!--第一项-->
 <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>
javascript 复制代码
/**index.wxss**/

.swip{
  height:150px;
}
.item{
  height: 100%;
  text-align: center;
}

swiper-item:nth-child(1) view{
  background-color: lightcoral;
}

swiper-item:nth-child(2) view{
  background-color: lightgray;
}
swiper-item:nth-child(3) view{
  background-color: lightgreen;
}

swiper组件的常用属性:

javascript 复制代码
    属性                     说明
indicator-dots             是否显示面板的指示点,默认是不显示的,如果需要使用该值,直接写上
indicator-color            指示点的颜色
indicator-active-color     当前选中的指示点的颜色
autoplay                   是否自动切换
interval                   自动切换的时间间隔,单位是毫秒 
circular                   是否采用写接滑动

三、text

(1)作用

文本组件,类似于HTML中的span标签,是一个行内元素

(2)使用

javascript 复制代码
通过text组件的selectable属性,可以实现长按选中文本内容的效果

<text selectable>666</text>

四、rich-text

(1)作用

通过该组件的nodes节点,可以吧HTML字符串渲染为对应的UI结构

(2)使用

javascript 复制代码
<rich-text nodes="<h1 style='color: red;'>666</h1>"></rich-text>

五、button

(1)作用

按钮组件,功能比HTML中的button按钮丰富,通过open-type属性可以调用微信提供的各种功能(客服,转发,获取用户权限,获取用户信息等等)

(2)使用

javascript 复制代码
<view>
 <!--通过type指定属性-->
 <button type="primary">主色调按钮</button>
 <button type="warn">警告按钮</button>
 <button type="default">默认按钮</button>

 <!--通过size="mini"小尺寸按钮-->
 <button type="primary">正常按钮</button>
 <button type="primary">1</button>
 <button type="primary" size="mini">小尺寸按钮</button>
 <button type="primary" size="mini">1</button>

 <!--plain镂空按钮-->
 <button type="primary" plain>镂空按钮</button>
</view>

六、image

(1)作用

图片组件,默认宽度约为300px,高度为240px

(2)使用

javascript 复制代码
<view>
  <image src="指定图片的路径"></image>
</view>
javascript 复制代码
 mode值           说明
 scaleToFill    默认值,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素
 aspectFit      缩放模式,保持纵横比,可以将图片完整的显示出来
 aspectFill     保证图片的短边显示出来,也就是说图片通常只能在水平或者垂直方向上是完整的,另外一个方向则会发生截取
 widthFix       宽度不变,高度自动发生变化,保持原图的宽高比不会发生变化。 
 heightFix      高度不变,宽度会发生自动变化,保持原图的宽高比不会发生变化
相关推荐
The_era_achievs_hero4 小时前
微信小程序71~80
微信小程序·小程序
dssxyz5 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
!win !6 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
澄江静如练_9 小时前
微信小程序发体验版
微信小程序·小程序
流口水的兔子13 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记13 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
张晓~1833994812115 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
The_era_achievs_hero17 小时前
微信小程序61~70
微信小程序·小程序
编程猪猪侠18 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
汤姆yu1 天前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序