小程序笔记3常用组件讲解及其使用（含代码，持续更新）

已于 2022-04-10 18:49:27 修改
阅读量587 收藏 2
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序 微信开放平台 微信公众平台
于 2022-04-10 18:41:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53669566/article/details/124081253
版权

 

 

<!--pages/list/list.wxml-->
<!-- <text>pages/list/list.wxml</text> -->
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>

/* pages/list/list.wxss */
.container1 view{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
.container1 view:nth-child(1){
background-color: lightgreen;
}
.container1 view:nth-child(2){
    background-color: lightskyblue;
}
.container1 view:nth-child(3){
    background-color: lightpink;
}

.container1{
    display: flex ;/* //使abc横向 */
    justify-content:space-around ;/*分散对齐*/
}

 

<!-- scroll-x 属性 允许横向滚动 -->
<!-- scroll-y 属性 允许纵向滚动 -->
<!-- 注意：使用竖向滚动时，必须给scroll-view 一个固定高度 -->
<scroll-view class="container2" scroll-y="true" scroll-x="true" >
<view>D</view>
<view>E</view>
<view>F</view>
</scroll-view>
/* --------- */


.container2{
    border: 1px solid red;
    width: 100px;
    /* 给scroll-view固定高度 一定要比原本的大 */
    height: 120px;
}
.container2 view{
    margin-top: 10px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}

.container2 view:nth-child(1){
    background-color: lightgreen;
    }
    .container2 view:nth-child(2){
        background-color: lightskyblue;
    }
    .container2 view:nth-child(3){
        background-color: lightpink;
    }




<!-- 轮播图结构 -->
<!-- indicator-dots属性：显示面板指示点 -->
<swiper class="swiper-container">
<!-- 第一张轮播图 -->
<swiper-item  >
    <view class="item">G</view>
</swiper-item>
<!-- 第二张轮播图 -->
<swiper-item>
    <view class="item">H</view>
</swiper-item>
<!-- 第三张轮播图 -->
<swiper-item>
    <view class="item">I</view>
</swiper-item>
</swiper>

/* ------ */
.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:lightskyblue;
}
swiper-item:nth-child(3) .item{
    background-color: lightpink;
}


<!-- indicator-dots="true" :是否显示面板指示点
indicator-color="white"：指示点的颜色
 indicator-active-color="gray"：当前选中的指示点颜色
autoplay="true" 是否自动切换
interval="3000" 自动切换时间间隔
circular="true" 是否采用衔接滑动-->
<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="gray"
autoplay="true" interval="3000" circular="true">

 


<!-- 常用的基础内容组件text和rich-text的用法 -->
<view>
手机号支持长安选中效果 长按复制
<!-- <text selectable="true">110111011101</text> 旧版-->
<text user-select="ture">110111011101444</text>

</view>

 

<!-- 常用的基础内容组件rich-text的用法 -->
<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

 

 

<view>----------通过type指定按钮类型--------</view>
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">主色调按钮</button>
<!-- <button type="default">主色调按钮</button> -->
<view>----------size"mini"小尺寸按钮--------</view>
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">主色调按钮</button>
<!-- <button type="default" size="mini">主色调按钮</button> -->
<view>----------plan镂空按钮--------</view>
<button size="mini" plain="true">普通按钮</button>
<button type="primary" size="mini" plain="true">主色调按钮</button>
<button type="warn" size="mini" plain="true">主色调按钮</button>

 

<!-- 图片组件 -->
<image></image>
<!-- 缩放模式 宽度不变，高度自动变化，保持原图高比不变 -->
<image src="/images/2.jpg" mode="widthFix"></image>
<!-- 缩放模式 高度不变，宽度自动变化，保持原图高比不变 -->
<image src="/images/2.jpg" mode="heightFix"></image>


<!--pages/list/list.wxml-->
<!-- <text>pages/list/list.wxml</text> -->
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>

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

<!-- 轮播图结构 -->
<!-- indicator-dots属性：显示面板指示点 -->
<!-- indicator-dots="true" :是否显示面板指示点
indicator-color="white"：指示点的颜色
 indicator-active-color="gray"：当前选中的指示点颜色
autoplay="true" 是否自动切换
interval="3000" 自动切换时间间隔
circular="true" 是否采用衔接滑动-->
<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="gray"
autoplay="true" interval="3000" circular="true">
<!-- 第一张轮播图 -->
<swiper-item  >
    <view class="item">G</view>
</swiper-item>
<!-- 第二张轮播图 -->
<swiper-item>
    <view class="item">H</view>
</swiper-item>
<!-- 第三张轮播图 -->
<swiper-item>
    <view class="item">I</view>
</swiper-item>
</swiper>

<!-- 常用的基础内容组件text和rich-text的用法 -->
<view>
手机号支持长安选中效果 长按复制
<!-- <text selectable="true">110111011101</text> 旧版-->
<text user-select="ture">110111011101444</text>
</view>

<!-- 常用的基础内容组件rich-text的用法 -->
<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

<view>----------通过type指定按钮类型--------</view>
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">主色调按钮</button>
<!-- <button type="default">主色调按钮</button> -->
<view>----------size"mini"小尺寸按钮--------</view>
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">主色调按钮</button>
<!-- <button type="default" size="mini">主色调按钮</button> -->
<view>----------plan镂空按钮--------</view>
<button size="mini" plain="true">普通按钮</button>
<button type="primary" size="mini" plain="true">主色调按钮</button>
<button type="warn" size="mini" plain="true">主色调按钮</button>

<!-- 图片组件 -->
<image></image>
<!-- 缩放模式 宽度不变，高度自动变化，保持原图高比不变 -->
<image src="/images/2.jpg" mode="widthFix"></image>
<!-- 缩放模式 高度不变，宽度自动变化，保持原图高比不变 -->
<image src="/images/2.jpg" mode="heightFix"></image>


/* pages/list/list.wxss */
.container1 view{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}


.container1 view:nth-child(1){
background-color: lightgreen;
}
.container1 view:nth-child(2){
    background-color: lightskyblue;
}
.container1 view:nth-child(3){
    background-color: lightpink;
}

.container1{
    display: flex ;/* //使abc横向 */
    justify-content:space-around ;/*分散对齐*/
}

/* --------- */


.container2{
    border: 1px solid red;
    width: 100px;
    /* 给scroll-view固定高度 一定要比原本的大 */
    height: 120px;
}
.container2 view{
    margin-top: 10px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}

.container2 view:nth-child(1){
    background-color: lightgreen;
    }
    .container2 view:nth-child(2){
        background-color: lightskyblue;
    }
    .container2 view:nth-child(3){
        background-color: lightpink;
    }

/* ------ */
.swiper-container{
    height: 150px;
}
.item{
    height: 100%;
    line-height: 150px;
    text-align: center;
}
swiper-item:nth-child(1) .item{/* .item前面要加空格标识全选*/
    background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
    background-color:lightskyblue;
}
swiper-item:nth-child(3) .item{
    background-color: lightpink;
}

/* 图片组件 */
image{
    border: 1px solid red;
}

纯24k
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
小程序常用组件
weixin_44908855的博客
10-06 1124
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html
小程序笔记资料.zip
05-12
【小程序笔记资料.zip】是一个包含了coderwhy老师关于小程序开发的详细教程资料的压缩包，主要聚焦于使用Vue.js框架进行开发。在这个压缩包中，我们可以期待找到一系列有助于深入理解和实践小程序开发的重要知识点。...
【小程序】小程序学习01
云里有只猫的博客
02-06 928
01 xml 组件 view text-align: center;文本横向居中 line-height 行高 display: flex;横向布局 justify-content: space-around;分散对齐 选择器：nth-child(x) wxml <view class="container1"> <view>A</view> <view>B</view> <view>C</view> </v
nth:child()选择器
qq_46241430的博客
04-04 1433
:nth-child()的理解和使用
CSS3 :nth-child() 选择器
weixin_43189240的博客
11-06 204
CSS3 :nth-child() 选择器 示例: <view> <view></view> <span></span> <view class="class-name">样式加在这里</view> <view class="class-name">这里不会有样式</view> &l...
微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image
m0_63622279的博客
07-11 7799
scroll-view组件就是滚动的视窗，使用scroll-view组件时，要想横向滚动或者纵向滚动时，需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是，纵向滚动需要给scroll-view组件限定高度，横向滚动则需要给scroll-view组件添加一个限定的宽度。swiper 和 swiper-item组件是微信小程序提供的用于快速构建轮播图的组件，swiper为轮播图的容器，swiper-item为轮播图的每一项。官网地址【swiper组件】
微信小程序开发项目源码+笔记.7z
04-30
3. JavaScript：在微信小程序中，JavaScript用于处理数据和事件，通过`Page`和`Component`进行页面和组件的生命周期管理，使用`wx`对象进行API调用，实现与微信接口的交互。 二、微信开发者工具 开发微信小程序离不...
零基本开发uniapp微信小程序教程《树洞笔记本》教程源文件与接口
05-27
《零基础开发uniapp微信小程序教程《树洞笔记本》教程源文件与接口》是一套针对初学者设计的全面教程，旨在帮助没有编程经验的人快速掌握微信小程序的开发技能。本教程以“树洞笔记本”这一实际项目为例，通过源代码...
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
01-20
本文将详细讲解如何在微信小程序中通过两种方式实现这一目标：使用`navigator`组件和使用`wx.navigateTo` API。 **方法一：使用navigator组件跳转传参** 在微信小程序中，`navigator`组件用于实现页面间的跳转。在...
小程序笔记.zip
02-27
【小程序笔记.zip】是一个压缩包，包含了关于微信小程序开发的学习资料。从提供的文件名来看，这些笔记涵盖了小程序的基础知识、核心语法、组件使用以及项目管理等多个方面。以下将详细解析这些知识点： 1. **初识...
小猫爪：RT1050学习笔记配套资料2
11-27
小猫爪的RT1050学习笔记系列主要聚焦于NXP i.MX RT1050跨界处理器的应用与开发，其中第19篇重点讲解了安全启动（Secure Boot）的第三部分——如何实现硬件认证架构（Hardware Authenticated Boot, HAB）签名。...
微信小程序语言课学习系统.zip
最新发布
03-23
在【微信小程序】部分，学生可以学习到微信小程序的基础语法、组件使用、API调用等核心内容。微信小程序是一种轻量级的应用开发框架，其特点是快速启动、流畅运行，适合开发移动端的轻应用。学习者将了解如何利用...
260集微信小程序高级开发课程
03-29
3. **页面与组件**：详细阐述微信小程序中的页面结构，如JSON配置文件、WXML模板语言、WXSS样式表，以及自定义组件的创建和使用。 4. **数据绑定与状态管理**：教授如何进行数据绑定，实现视图层与逻辑层的交互，...
笔记本电子元件等基础讲解视频教程.rar
09-04
这个“笔记本电子元件等基础讲解视频教程”提供了一个全面的学习平台，帮助我们深入理解笔记本电脑中的各种电子元件和组件。以下是对这些关键知识点的详细阐述： 一、电路板（主板） 主板是笔记本电脑的中枢神经...
《微信小程序开发详解》读书笔记模板x.pptx
09-14
4. 组件与API，讲解了小程序的组件和API的使用，包括Flex布局和API的应用。 5. 博客园客户端——新闻资讯类，提供了一个完整的项目案例，展示了小程序开发的过程和方法。 6. 测测你是三国杀中的谁——调查测试类，...
小程序wxss进阶
培根芝士的专栏
07-07 517
before ，after before为控件前面展示的文本，after为控件后面展示的文本 .view_1 { font-size: 70rpx; color: red; } /* 在view_1控件之前 */ .view_1::before { content: "苹果：¥ "; font-size: 40rpx; color: black; } /* 在view_1控件之后 */ .view_1::after { content: " 元/斤"; font-si..
css中选取子元素
生存不忘生活
08-08 5730
1、first-child first-child表示选择列表中的第一个标签。代码如下： li:first-child{background:#090} 上面的意思是，li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签，代码如下： li:last-child{background:#090} 3、nth-ch
微信小程序--》你真的了解小程序组件的使用吗？
ztK63LrD的博客
07-18 3986
详解了小程序组件的分类，以及讲解了常用组件的使用
微信小程序样式选择器（二）
该用户还没想到好的昵称的博客
07-20 9743
伪类选择器 动态伪类选择器（:link   :visited   :hover   :active    :focus） :link：链接没有被访问时的效果（微信小程序不支持） :hover：鼠标经过的效果（微信小程序不支持） :visited：链接被访问后的效果（微信小程序不支持） :active：鼠标点下去的效果（正发生在点的那一下）   ...
前端学习笔记-微信小程序学习笔记
01-09
前端学习笔记-微信小程序学习笔记

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值