草庐IT

微信小程序-常用视图容器类组件[图文并茂 通俗易懂]

新生代农民工-小王八 2023-08-09 原文

目录

view

scroll-view

swiper和swiper-item

text

rich-text

button

image


view

  • 普通视图区域 块级元素 类似HTML的div

使用效果:

代码展示:

list.wxml

<view class="container1">

<view>A</view>

<view>B</view>

<view>C</view>

</view>

list.wxss

/* pages/list/list.wxss */

.container1 {

display: flex;

justify-content: space-around;

}

.container1 view {

width: 5rem;

height: 5rem;

text-align: center;

line-height: 5rem;

}

.container1 view:nth-child(1){

background-color: pink;

}


.container1 view:nth-child(2){
 background-color: skyblue;
}

.container1 view:nth-child(3){ 
background-color: yellow; 
}

scroll-view

  • 可滚动的视图区域
  • 常用来实现滚动列表的效果

使用效果:

代码展示:

list.wxml

<scroll-view class="container1 container2" scroll-y>

<view>A</view>

<view>B</view>

<view>C</view>

</scroll-view>

list.wxss 

/* pages/list/list.wxss */
.container1 {
  display: flex;
  justify-content: space-around;
}
.container1 view {
  width: 5rem;
  height: 5rem;
  text-align: center;
  line-height: 5rem;
}
.container1 view:nth-child(1){
 background-color: pink;
}

.container1 view:nth-child(2){
  background-color: skyblue;
}

.container1 view:nth-child(3){
 background-color: yellow; 
}
.container2 {
  margin-top: 2rem;
  border: 1px solid red;
  // 必须给scroll-view 固定高度
  height: 6rem;
  width: 5rem;
}

swiper和swiper-item

  • 轮播图容器组件 和 轮播图 item组件

更多了解属性

使用效果:

代码展示:

list.wxml

<swiper class="swiper-container" indicator-dots autoplay>
<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>

 list.wxss

.swiper-container {
  height: 8rem;
}
.item {
  height: 100%;
  line-height: 8rem;
  text-align: center;
}

swiper-item:nth-child(1) .item{
 background-color: pink;
}

swiper-item:nth-child(2) .item {
  background-color: skyblue;
}

swiper-item:nth-child(3) .item {
 background-color: yellow; 
}

text

属性类型默认值必填说明最低版本
user-selectbooleanfalse文本是否可选,该属性会使文本节点显示为 inline-block2.12.1
spacestring显示连续空格1.4.0
decodebooleanfalse是否解码1.4.0

使用效果:

代码展示:

<!--pages/list/list.wxml-->
<view>
<text user-select="true">2015年1月,微信第一条朋友圈广告</text>
<view>不可拷贝</view>
</view>

rich-text

属性类型默认值必填说明最低版本
nodesarray/string[]节点列表/HTML String1.4.0
spacestring显示连续空格2.4.1
user-selectbooleanfalse文本是否可选,该属性会使节点显示为 block2.24.0

使用效果:

代码展示:

<!--pages/list/list.wxml-->
<rich-text nodes="<h1 style='color:pink;'>hello world</h1>"></rich-text>

button

  • 按钮组件
  • 功能丰富
  • 通过open-type属性可以调用微信提供的各种功能(获取用户授权,转发)

属性详情

使用效果:

代码展示:

<!--pages/list/list.wxml-->
<!-- type 指定按钮类型 -->
<button>
默认按钮
</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告</button>
<view style="text-align: center;">=============</view>
<!-- size="mini" 选择小尺寸 -->
<button size="mini">
默认按钮
</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告</button>
<view style="text-align: center;">=============</view>
<!--plain 镂空按钮  -->
<button plain>
默认按钮
</button>
<button type="primary" plain>主色调按钮</button>
<button type="warn" plain>警告</button>

image

mode属性 用来指定图片的裁剪和缩放模式

modestringscaleToFill图片裁剪、缩放的模式1.0.0
合法值说明最低版本
scaleToFill缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
heightFix缩放模式,高度不变,宽度自动变化,保持原图宽高比不变2.10.3

使用效果:

代码展示: 

list.wxml

<!--pages/list/list.wxml-->
<!-- 空图片 -->
<image></image>
<!-- 使用src指向图片路径 mode 指定图片裁剪和缩放模式-->
<image mode="widthFix" src="/images/team.jpg"></image>

list.wxss

image {
  // 通过边框线证明image有默认的宽和高
  border: 1px solid pink;
}

有关微信小程序-常用视图容器类组件[图文并茂 通俗易懂]的更多相关文章

  1. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  3. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  4. ruby - 有人可以解释一下在 Ruby 中注入(inject)的真实、通俗易懂的用法吗? - 2

    我正在学习Ruby,遇到了inject。我正处于理解它的风口浪尖,但当我是那种需要真实世界的例子来学习一些东西的人时。我遇到的最常见的例子是人们使用inject来添加一个(1..10)范围的总和,我不太关心这个。这是一个任意的例子。在实际程序中我会用它做什么?我正在学习,所以我可以继续使用Rails,但我不必有一个以Web为中心的示例。我只需要一些我可以全神贯注的目标。谢谢大家。 最佳答案 inject有时可以通过它的“其他”名称reduce更好地理解。它是一个对Enumerable进行操作(迭代一次)并返回单个值的函数。它有许多有

  5. Ubuntu20.04系统WineHQ7.0安装微信 - 2

    提供3种Ubuntu系统安装微信的方法,在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信:ubuntu20.04安装最新版微信--可以支持微信最新版,但是适配的不是特别好;比如WeChartOCR.exe报错。2.原生微信安装:linux系统下的微信安装(ubuntu20.04)--微信适配的最好,反应最快,但是微信版本只到2.1.1,版本太老,很多功能都没有。3.深度deepin-wine6安装微信:ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好,当前个人使用此种方法1个月,微信版本3.4;没什么大问题,尚可。一、WineHQ7.0安装微信

  6. 微信小程序订餐系统 - 2

    对传统的餐饮商家来说,小程序很好地解决了餐厅线下线上连接的问题,在引流获客、节约人力、营销宣传、塑造会员体系、改善消费体验等方面都有很大帮助。小程序点餐可以帮助餐饮企业节省一大把人力开支。一个包含扫码点单、菜品管理、优惠券推送、外卖配送的小程序,商家花几万元就能完成开发测试并投入。商家为什么要开通“扫码点餐”1.解决服务员不够用的问题。2.不怕顾客跑单漏单。3.在微信就能管理菜品、查看营业额。4.订单小票显示顾客桌号和已点菜品。5.可在“附近的小程序”找到您的门店。如今餐饮业常用的三种经营模式:1堂食点单模式客人通过小程序堂食点单。商家可以在微信扫码点餐小程序管理后台根据自己店内情况来设置不同

  7. 最新版人脸识别小程序 图片识别 生成二维码签到 地图上选点进行位置签到 计算签到距离 课程会议活动打卡日常考勤 上课签到打卡考勤口令签到 - 2

    技术选型1,前端小程序原生MINA框架cssJavaScriptWxml2,管理后台云开发Cms内容管理系统web网页3,数据后台小程序云开发云函数云开发数据库(基于MongoDB)云存储4,人脸识别算法基于百度智能云实现人脸识别一,用户端效果图预览老规矩我们先来看效果图,如果效果图符合你的需求,就继续往下看,如果不符合你的需求,可以跳过。1-1,登录注册页可以看到登录页有注册入口,注册页如下我们的注册,需要管理员审核,审核通过后才可以正常登录使用小程序1-2,个人中心页登录成功以后,我们会进入个人中心页我们在个人中心页可以注册人脸,因为我们做人脸识别签到,需要先注册人脸才可以进行人脸比对,进

  8. ruby - 尝试授权服务器到 ruby​​ 中的服务器类型应用程序以访问 Google 日历时无效授权 - 2

    我正在尝试为自己创建一个直接连接到我的日历的应用程序……但我从不想参与重新验证。我只想编写一次身份验证代码并完成它。授权码如下:key=Google::APIClient::PKCS12.load_key(SERVICE_ACCOUNT_PKCS12_FILE_PATH,PASSWORD)asserter=Google::APIClient::JWTAsserter.new(SERVICE_ACCOUNT_EMAIL,'https://www.googleapis.com/auth/calendar',key)@client=Google::APIClient.new@client.a

  9. 微信小程序切换云环境 - 2

    在开发微信小程序的时候,我们可能需要开发环境和测试环境,或者其他环境,下面是切换环境的方法。首先需要明确的是:前端的页面代码是不区分环境的,环境的区分指的是云函数、云数据库、云存储这些。1、更改云函数的使用云环境这里我们从cloud1更改为test-cloud,这个改完是没有用的,因为在前端代码指定了使用的云环境。cloudfunctions文件和miniprogram文件虽然都在一个目录下,但是这两个没有直接联系。2、在evList.js中添加自己云环境evList.js存储了云环境列表,这里把test-cloud加到这个列表里,需要填写envId和alias,参照cloud1写就行。3、更

  10. Spring Boot中的微信支付(小程序) - 2

    前言微信支付是企业级项目中经常使用到的功能,作为后端开发人员,完整地掌握该技术是十分有必要的。一、申请流程和步骤图1-1注册微信支付账号获取微信小程序APPID获取微信商家的商户ID获取微信商家的API私钥配置微信支付回调地址绑定微信小程序和微信支付的关系搭建SpringBoot工程编写后台支付接口发布部署接口服务项目使用微信小程序或者UniAPP调用微信支付功能支付接口的封装配置jwt或者openid的token派发原生微信小程序完成支付对接二、注册商家2.1商户平台商家或者企业想要通过微信支付来进行商品的销售,必须先通过微信平台(pay.weixin.qq.com)去将商家进行注册。注册成

随机推荐