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

这篇具有很好参考价值的文章主要介绍了微信小程序开发---基本组件的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、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>

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

六、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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】button和image组件的基本使用

    ✅作者简介:CSDN内容合伙人、阿里云专家博主、51CTO专家博主🏆 📃个人主页:hacker707的csdn博客 🔥系列专栏:微信小程序🥇 💬个人格言:不断的翻越一座又一座的高山,那样的人生才是我想要的。这一马平川,一眼见底的活,我不想要,我的人生,我自己书写,余生很长,

    2024年02月09日
    浏览(153)
  • 【小程序开发必备】微信小程序常用API全介绍,附示例代码和使用场景

    ✍创作者:全栈弄潮儿 🏡 个人主页: 全栈弄潮儿的个人主页 🏙️ 个人社区,欢迎你的加入:全栈弄潮儿的个人社区 📙 专栏地址:小程序从入门到精通 【分享几个国内免费可用的ChatGPT镜像】 【10几个类ChatGPT国内AI大模型】 【用《文心一言》1分钟写一篇博客简直yyds】

    2023年04月09日
    浏览(54)
  • 微信小程序 scroll-view组件的基本使用

     scroll-view 组件 其实和view组件很像,结合上节课的内容我们接着尝试教大家一下这个组件怎么使用,现实中这个组件能实现的效果又有那些  上图是CSDN的一个私聊窗口界面,我么看图就能想象的到,左边的聊天对像窗口是不是可以滚动的,这时候小程序就可以通过scroll-vie

    2024年02月01日
    浏览(68)
  • 微信小程序背景渐变写法加占比以及微信小程序开发过程中长使用的代码段

    在写微信小程序的过程中,ui设计了一个渐变的背景图,网上一搜很多都只写了怎么样让微信渐变色,但是我的需求就是渐变色而且控制渐变色范围,比如三个颜色一个头部是深蓝,中间浅蓝,最底下是白色,那么直接套用网上的列子(第一段代码),三个色渐变范围是一样

    2024年01月17日
    浏览(52)
  • 微信小程序基本使用2:wxs,组件的使用以及弹窗、滚动条

    WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML ,可以构建出页面的结构。 可以在模版中内联少量处理脚本,丰富模板的数据预处理能力。 wsx 在IOS设备上性能是JavaScript的2-20倍 内嵌式 module=“属性值” 关联式 在utils下创建文件tools.wxs 在wxs文件中直接写方法,最后通过

    2024年02月02日
    浏览(65)
  • 【微信小程序】swiper和swiper-item组件的基本使用

    ✅作者简介:CSDN内容合伙人、阿里云专家博主、51CTO专家博主🏆 📃个人主页:hacker707的csdn博客 🔥系列专栏:微信小程序 💬个人格言:不断的翻越一座又一座的高山,那样的人生才是我想要的。这一马平川,一眼见底的活,我不想要,我的人生,我自己书写,余生很长,请

    2024年02月09日
    浏览(62)
  • 微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类)

    关于微信小程序知识点一共做了六个博客,涵盖大部分内容,有想学习的可以按照以下顺序查看 1.微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类) 2.微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染 3.微信小程序wxss相关介绍、全局配置和tabbar知识

    2024年02月11日
    浏览(65)
  • 微信小程序 | 小程序开发

    🖥️ 微信小程序专栏:小程序开发 初级知识 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、认识小程序开发 什么是小程序? 各个平台小

    2024年01月24日
    浏览(64)
  • 【微信小程序开发】第 7 课 - 小程序的常用组件

              欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 目录 1、缘起 2、小程序中组件的分类 3、常用的视图容器类组件  3.1、view 组件 3.2、scroll - view 组件 3.3、swiper 和 swiper-item 组件 3.4、text  组件的基本使用 3.5、

    2024年02月12日
    浏览(51)
  • 微信小程序开发之微信小程序交互

    目录 一、小程序交互 前端: 1、先在登陆界面中编写代码 2、在前端中编写js代码 后端:           1、先导入依赖:           2、定义好配置文件           3、编写好实体类           4、将帮助类进行配置           5、编写mapper类           6、定义service层以及对应的

    2024年02月09日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包