目录
一、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)用法
//wxml文件 <scroll-view class="scrollcon" scroll-y> //这里scroll-y表示纵向滚动 <view>A</view> //换成scroll-x表示横向滚动 <view>B</view> <view>C</view> </scroll-view>
/**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)用法
<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>
/**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组件的常用属性:
属性 说明 indicator-dots 是否显示面板的指示点,默认是不显示的,如果需要使用该值,直接写上 indicator-color 指示点的颜色 indicator-active-color 当前选中的指示点的颜色 autoplay 是否自动切换 interval 自动切换的时间间隔,单位是毫秒 circular 是否采用写接滑动
三、text
(1)作用
文本组件,类似于HTML中的span标签,是一个行内元素
(2)使用
通过text组件的selectable属性,可以实现长按选中文本内容的效果 <text selectable>666</text>
四、rich-text
(1)作用
通过该组件的nodes节点,可以吧HTML字符串渲染为对应的UI结构
(2)使用
<rich-text nodes="<h1 style='color: red;'>666</h1>"></rich-text>
五、button
(1)作用
按钮组件,功能比HTML中的button按钮丰富,通过open-type属性可以调用微信提供的各种功能(客服,转发,获取用户权限,获取用户信息等等)
(2)使用
<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>
文章来源:https://www.toymoban.com/news/detail-699869.html
六、image
(1)作用
图片组件,默认宽度约为300px,高度为240px文章来源地址https://www.toymoban.com/news/detail-699869.html
(2)使用
<view> <image src="指定图片的路径"></image> </view>
mode值 说明 scaleToFill 默认值,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素 aspectFit 缩放模式,保持纵横比,可以将图片完整的显示出来 aspectFill 保证图片的短边显示出来,也就是说图片通常只能在水平或者垂直方向上是完整的,另外一个方向则会发生截取 widthFix 宽度不变,高度自动发生变化,保持原图的宽高比不会发生变化。 heightFix 高度不变,宽度会发生自动变化,保持原图的宽高比不会发生变化
到了这里,关于微信小程序开发---基本组件的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!