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

目录

一、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      高度不变,宽度会发生自动变化,保持原图的宽高比不会发生变化
相关推荐
说私域3 小时前
“开源AI大模型AI智能名片S2B2C商城小程序”视角下的教育用户策略研究
人工智能·小程序
2501_916007476 小时前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone
一匹电信狗8 小时前
【MySQL】数据库表的操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序
2501_9159214311 小时前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
知识分享小能手11 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
Q_Q196328847512 小时前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js
韩立学长14 小时前
基于微信小程序的公益捐赠安全平台9hp4t247 包含完整开发套件(程序、源码、数据库、调试部署方案及开发环境)系统界面展示及获取方式置于文档末尾,可供参考。
数据库·微信小程序·小程序
2501_9159184115 小时前
iOS 混淆与 IPA 加固一页式行动手册(多工具组合实战 源码成品运维闭环)
android·运维·ios·小程序·uni-app·iphone·webview
流***陌1 天前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序
亮子AI1 天前
【小程序】微信小程序点击效果(view、button、navigator)
微信小程序·小程序