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

已于 2022-04-10 18:49:27 修改
阅读量585 收藏 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
    评论
专栏目录
微信小程序界面设计-小程序中的WXSS(css)选择器
01-18
讲解微信小程序中如何使用css选择器，哪些选择器支持哪些选择器不支持，讲解选择器分组,属性选择器,后代选择器,子元素和相邻兄弟选择器,伪类选择器,伪元素选择器,微信小程序中样式css选择器等
【小程序】小程序学习01
云里有只猫的博客
02-06 919
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 1420
:nth-child()的理解和使用
CSS3 :nth-child() 选择器
weixin_43189240的博客
11-06 203
CSS3 :nth-child() 选择器 示例: <view> <view></view> <span></span> <view class="class-name">样式加在这里</view> <view class="class-name">这里不会有样式</view> &l...
微信小程序——:nth-child等在小程序中使用
我是我
05-27 3952
Vue中，父组件列表引入每一个子组件元素的时候，可以在父组件的CSS文件中设置子组件的margin，可以通过样式穿透在父组件设置子组件:nth-child(2n)为0等，那么在小程序中是如何实现的呢？ 父组件： WXML <view class="getnotice-list"> <t-notice-item class="getnotice-list-item" wx:for="{{getnotice}}" wx:key="index" content="{{item}}"
小程序笔记资料.zip
05-12
【小程序笔记资料.zip】是一个包含了coderwhy老师关于小程序开发的详细教程资料的压缩包，主要聚焦于使用Vue.js框架进行开发。在这个压缩包中，我们可以期待找到一系列有助于深入理解和实践小程序开发的重要知识点。...
微信小程序开发项目源码+笔记.7z
04-30
3. JavaScript：在微信小程序中，JavaScript用于处理数据和事件，通过`Page`和`Component`进行页面和组件的生命周期管理，使用`wx`对象进行API调用，实现与微信接口的交互。 二、微信开发者工具 开发微信小程序离不...
零基本开发uniapp微信小程序教程《树洞笔记本》教程源文件与接口
05-27
《零基础开发uniapp微信小程序教程《树洞笔记本》教程源文件与接口》是一套针对初学者设计的全面教程，旨在帮助没有编程经验的人快速掌握微信小程序的开发技能。本教程以“树洞笔记本”这一实际项目为例，通过源代码...
小程序笔记.zip
02-27
【小程序笔记.zip】是一个压缩包，包含了关于微信小程序开发的学习资料。从提供的文件名来看，这些笔记涵盖了小程序的基础知识、核心语法、组件使用以及项目管理等多个方面。以下将详细解析这些知识点： 1. **初识...
小猫爪：RT1050学习笔记配套资料2
11-27
小猫爪的RT1050学习笔记系列主要聚焦于NXP i.MX RT1050跨界处理器的应用与开发，其中第19篇重点讲解了安全启动（Secure Boot）的第三部分——如何实现硬件认证架构（Hardware Authenticated Boot, HAB）签名。...
小程序常用组件
weixin_44908855的博客
10-06 1121
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html
微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image
m0_63622279的博客
07-11 7764
scroll-view组件就是滚动的视窗，使用scroll-view组件时，要想横向滚动或者纵向滚动时，需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是，纵向滚动需要给scroll-view组件限定高度，横向滚动则需要给scroll-view组件添加一个限定的宽度。swiper 和 swiper-item组件是微信小程序提供的用于快速构建轮播图的组件，swiper为轮播图的容器，swiper-item为轮播图的每一项。官网地址【swiper组件】
小程序wxss进阶
培根芝士的专栏
07-07 508
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..
微信小程序-常用视图容器类组件[图文并茂 通俗易懂]
Little___Turtle的博客
10-19 1812
初识微信小程序开发-常用组件
微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类
杭州.黄老师
04-03 6868
小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类 定义和用法 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。 提示：请参阅 :nth-of-type() 选择器，该选择器选取父元素的第 N 个指定类型的子元素。 浏览器支持 所有主流浏览器均支持 :nth-child() 选择器，除了 IE8 及更...
css中选取子元素
生存不忘生活
08-08 5716
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
uni-app中的css3选择器使用
m0_66878407的博客
05-24 998
.box { width: 300px; height: 300px; background-color: pink; } #view2,text{ background: yellow; } 2.给 view 添加样式 .box view{ font-size: 40upx; color: #8A6DE9; } 3.想改变某一个vi 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 ew 样式 .box>view:nth-c
css中nth-child的属性
Debug的博客
08-23 3387
参数为整数 :nth-child(1)它表示要选择父元素中索引为该数值的子元素（此时的索引值从1开始） 参数是奇数偶数 :nth-child(odd)odd表示选择奇数项的子元素 :nth-child(even)even表示选择偶数项的子元素 参数是倍数 :nth-child(3n)odd表示选择3，6，9` :nth-child(2n)odd表示选择2，4，6 :nth-child(n+3)odd表示选择4，8，12 ...
微信小程序组件介绍
WZY22502701的博客
09-23 997
微信小程序
前端学习笔记-微信小程序学习笔记
最新发布
01-09
前端学习笔记-微信小程序学习笔记

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值