[微信小程序] 入门笔记1-滚动视图组件

news2025/1/10 11:50:04

[微信小程序] 入门笔记1-滚动视图组件

1.页面&组件&渲染

  • 在小程序是由一个个页面page组成, 而页面又是由一个个组件component组成.
  • 和网页类似,这里的组件指的就是输入框<input>,按钮<button>,文本<text>,图片<image>等元素.如果你学过网页一定不陌生.如果没学过应该也好理解的吧 .
  • 小程序是允许 自定义组件 的, 比如单独一个输入框,单独一个文本,比较少用,正常都是组合起来使用.为了方便调用,避免重复设置, 可以自定义组件,将常用的组件功能打包起来.甚至可以添加/实现更多功能.
  • 关于小程序页面,有 渲染 这一概念. 个人理解就是指在页面内 显示组件 这一过程.因为一般都是动态的,会变化的.需要根据情况显示不同内容——渲染不同组件.
  • 所以小程序编程提供了非常方便的 条件渲染列表渲染 .允许页面可以动态的选择显示什么组件,显示多少组件.可以通过脚本内的代码继续控制,改变标记变量或是数组内容.从而达到丰富效果.
  • 微信小程序还有很多特供的语法,而且这些语法不同版本写法不太一样,虽然新版本是向下兼容.但是初学者搜到同一个功能,同一个api,不同调用方法,看得是真头大!!!
  • 经过上面的介绍,你应该大概明白,小程序主要就是用组件组合起来渲染出页面,而脚本就是空中组件的渲染,从而改变页面.还有很多官方特供的api.或是你自己写的库也可以丢一起,我习惯丢归总在文件夹library内.

2.界面.wxml

现在开始直接实现功能,没有比实操更加好的老师了.

  • 在页面page0.wxml中填写以下代码. 下面开始详细介绍知识点;
    在这里插入图片描述
<!-- 这是一个总的容器 -->
<view class="container">  

<!-- 这是滚动视图组件 -->
<swiper autoplay="{{true}}" circular="{{true}}" interval="{{5000}}" duration="{{1000}}" indicator-dots="{{true}}">  
    <block wx:for="{{image_urls}}" wx:key="index">  
        <swiper-item>  
            <image src="{{item}}" mode="aspectFit" />  
        </swiper-item>  
    </block>  
</swiper>  

</view>

2.1.总容器 container

  • 页面总是包含在一个view内,然后给予类名container.约定俗成,一会编写样式时再介绍wxss.

2.2.组件属性

  • 滑块视图容器 swiper 详细定义可以查看微信开放文档, IDE内,将鼠标放在官方语法上,会便捷的显示说明弹窗.组件内部属性和参数也适用.

在这里插入图片描述
在这里插入图片描述

  • 组件内填写的是属性,属性是有默认值,也可以创建时指定外部传入值.如果点击可视化,再点击页面内该组件,选中它,你可以在窗口内看到该组件的所有属性.非常方便.不过还是更加喜欢直接查手册,因为屏幕太小了,这样并排显示很挤 .

在这里插入图片描述

  • 设定属性时,必定适用双引号包住.但并不代表它们是任意字符串,实际上是有指定类型的在上图中你也可以看到booleannumber类型的指定.
  • 然后语法上,通过下面的3个例子,应该能明白,加2个双括号可以填写变量或常量,不加就只能是常量.
autoplay="true" // 指定属性为 真 true

autoplay="{{temp_bool}}" // 指定属性为 js脚本内名为 temp_bool 的变量数据

autoplay="{{true}}" // 指定属性为 true 的常量数据, 相当于第一个了

2.3.列表渲染

  • 开头也说过, 可以使用数组, 控制渲染组件. block不是组件,只是为了搭配wx:for使用,代表括起来的东西会循环渲染几遍.这样就不必重复几遍组件代码了.
  • wx:for语法中,数组的元素名默认为item,对应元素的索引/下标默认为index.
<block wx:for="{{image_urls}}" wx:key="index">  
    <swiper-item>  
        <image src="{{item}}" mode="aspectFit" />  
    </swiper-item>  
</block>  
  • image_urls是脚本js内定义的一个数组, 里面的存着一堆图片的网络链接, 以上代码就是循环取出这些图片链接,并给予image组件,
  • 注意到了wx:key,指的是数组内该元素的唯一标识,因为考虑到了可能出现相同元素,但只显示一次?一般情况下少用,但是不填写这个语法会给我报警告,恼火.所以使用元素的下标index作为唯一标识.也就代表数组内所有元素都是唯一的,都要执行一遍.
  • 还有一点.如果你不喜欢提供的默认变量名itemindex,也可以自定义这两个变量的名字.只需要添加wx:for-item="自定义元素名", wx:for-index="自定义下标名" .不过建议不要多此一举.除非你多重嵌套,需要区分变量名.
  • 最后可以在模拟调试中看到效果.现在没有定义image_urls数组,所以看到是空的,没有内容.脚本内就可以通过修改数组内容,达到动态修改页面的效果了.
  • 点击选择这个组件,还能看到它的样式,后面调试样式时会用到.

在这里插入图片描述

2.2.5.条件渲染

  • 除了列表渲染还有条件渲染wx:if="",这里我暂时没用到,提一句先.简单介绍一下.

条件渲染
https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html

  • 下面例子中简单的运用,值得说明的是wx:else后面的内容不是必须的,可以忽略,写出来纯粹是为了自己方便好看.
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else="{{length }}"> 3 </view>
  • 可以使用block包围,
<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>
<block wx:elif="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>
<block wx:else="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>
  • 如果单纯只有一个条件判断,没有wx:elifwx:else,只有一个wx:if那结果等效hidden,这时推荐使用后者.
<block hidden="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

3.脚本.js

  • 在脚本内添加数组, 注意这个格式要求, 脚本所有内容都必须写在 Page({...})内, 然后数据变量都必须写在date:{...}内.这里的变量都可以被页面wxml直接访问,也可以被同脚本内的方法调用.具体后面例子再说.

在这里插入图片描述

image_urls: [
    'https://images.unsplash.com/photo-1705198190334-156df02024de?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    'https://images.unsplash.com/photo-1714414638521-7b56a97ec5e2?q=80&w=1771&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    'https://images.unsplash.com/photo-1709926301080-755d4f712edf?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    // ... 更多图片URL  
]
  • 这个时候再看模拟效果, 就能看到列表渲染出3个组件,页面可以滚动先显示3张图片.如果细心一点可能发现样式怎么填了那么多内容.

在这里插入图片描述

4.样式.wxss

  • 在样式文件中插入以下代码, 为了方便对比效果,可以将滑块视图容器组件拷贝一份.可以就可以看到2个组件在页面上的布局变化,根据样式的不同,位置与大小会不同.
/* pages/page0/page0.wxss */

/* 整体容器 */
.container {
    /* 弹性盒子布局 */
    display: flex;
    /* 决定主轴的方向 即项目的排列方向: 主轴为水平方向,起点在左端 */
    flex-direction: row;
    /* 定义项目是否换行以及如何换行: 换行,第一行在上方 */
    flex-wrap: wrap;
    /* 定义项目在主轴上的对齐方式: 每个项目两侧的间隔相等 */
    justify-content: space-around;
    /* 定义项目在竖直方向上对齐方式: 交叉轴的起点对齐 */
    align-items: flex-start;
    /* 占据整个视口高度: vh = % */
    /*height: 100vh; 
    不要写这个属性,有错误,会导致只能显示一个屏幕大小的页面,超出的话就截取看不到了,不会能使用滚动条上下拖动 */
}

/* 滑块视图容器 */
swiper { /* 不要使用属性名,会覆盖掉同一界面内所有符合的属性,应该使用唯一的类名 */
    /* 占据父级的大小 */
    width: 100%;
    height: 50vh;
    /* 设置你的滑动视图上下间距 */
    margin-top: 1vh;
    margin-bottom: 1vh;
    /* 设置容器的背景颜色 */
    background-color: #15fd00;
}

/* 滑块视图容器 中的 图片 */
swiper image {
    /* 限定显示区域 */
    width: 100%;
    height: 100%;
    /* 设置容器的背景颜色 */
    background-color: #39d3d8;
}
  • 调试器窗口中可以方便的看到样式的定义位置,因为经常会出现父级/子级/选择器重复定义,使用在这个工具就可以快速筛查.

在这里插入图片描述

  • 对于界面的最外围的整体容器container,有个很重要的属性display,主要是为了规定页面内各个部件内的布局,类比一下qt的布局,要手动规划每一层嵌套.就好头痛.推荐个帖子,有详细对比.

display:flex(弹性盒子布局)详解 https://blog.csdn.net/qq_44537625/article/details/100040169

  • 另外,查样式例子, 总是有许多类名,我本人不太喜欢这种用法,我更加倾向于使用元素名嵌套,因为有取名困难症
  • 在编写样式时,可以使用三种常用的区分方式, 组件名, 类名, ID名,因为不分先后, 只分内外的特点. 也就是说在wxss内的顺序是不会影响覆盖的,只有wxml内的子级父级关系才会影响覆盖.
  • 如果使用组件,组件内的样式和页面内的样式是可以相互起作用的.那就导致如果使用组件名的方式指定样式,会乱套!!!
  • 所以我个人总结推荐: (错的观点,因为小程序不建议这么做,会报警告,实际上可能有作用,但是不建议)

Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.
组件wxs中不允许使用某些选择器,包括标记名选择器、ID选择器和属性选择器。

  1. 使用组件名定义样式, 属于更改该组件的默认样式, 应该只有一处.
  2. 使用类名定义样式, 属于定义一种组件的一种样式, 一个组件是可以使用多种样式, 也就代表可以先定义一种组件的几种不同样式,然后使用时再自由组合搭配.
  3. 使用ID名定义样式,属于唯一指定,因为具有唯一性.
<!-- 一个组件可以设定几种不同的类样式, 另外,关于类名是喜欢使用一杆(-)来分隔单词 -->
<view class="container my-custom-class another-class">  </view>

CSS6大种选择器(超详细!!!) https://blog.csdn.net/weixin_52682014/article/details/127709889
CSS 组合选择符 https://www.runoob.com/css/css-combinators.html

  • 子级处于父级下,使用 widthheight 定义尺寸, 长宽可以百分比单位%. 纵向(高度)还可以使用vh, 横向(宽度)使用 rpx. 都是相对尺寸, 为了适应不同屏幕大小, 需要避免使用绝对尺寸.

rpx 尺寸单位 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D

  • 可以修改组件的宽度,看看布局的变化;
swiper {
    /* 占据父级的大小 */
    width: 100%;
    ...
}    
swiper image {
    /* 占据父级的大小 */
    width: 100%;
    ...
}    
  • 建议直接查样式例子, 因为这玩意光看语法没啥用…推荐以下网站:

uiverse https://uiverse.io/

  • 下一节开始写个基础组件.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1654897.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

快速排序(java细节实现)

目录 快速排序: Hoare版: 挖坑法 快速排序的优化 快速排序的非递归实现 小结 从小到大排序 快速排序: 基本思想为&#xff1a;任取待排序元素序列中的某元素作为基准值&#xff0c;按照该排序码将待排序集合分割成两子序列&#xff0c;左子序列中所有元素均小于基准值&…

二叉树的基础遍历2.0

1.0入口&#xff1a;二叉树的基础遍历-CSDN博客 在1.0中使用的是简单的结构体建树&#xff0c;本文注重用二维vector建树。 前序&#xff0c;中序和后序的分析1.0已给出&#xff0c;本文不做过多介绍&#xff0c;本文重点讲二叉树的层序遍历。 先奉上前中后序的代码&#xf…

只允许内网访问时,如何设置hosts

1、Hosts文件简介 hosts文件是一个没有扩展名的计算机文件&#xff0c;用于将主机名与对应的 IP 地址关联起来。在操作系统中&#xff0c;hosts文件通常用于在本地解析域名&#xff0c;以便将域名映射到特定的IP地址。这个文件可以用来屏蔽广告、加速访问特定网站、解决DNS解析…

计算机网络技术主要学什么内容,有哪些课程

计算机网络技术专业是一个涉及理论与实践紧密结合的学科&#xff0c;主要学习内容有计算机网络基础、网络设备技术、网络编程等内容&#xff0c;以下是上大学网&#xff08;www.sdaxue.com&#xff09;整理的计算机网络技术主要学什么内容&#xff0c;供大家参考&#xff01; 基…

服务运维问题

2024-05-01&#xff08;docker 部署的 jar包自动关闭&#xff09; 查询运行情况&#xff1a;处于退出状态 docker ps -a 查询日志&#xff1a;看不出问题 docker logs -f --tail1000 demo-java 查询关于java服务日志&#xff1a;Out of memory: Kill process 16236 (java) …

学习大数据,所需更要的shell基础(2)

文章目录 read读取控制台输入函数系统函数bashnamedirname 自定义函数Shell工具&#xff08;重点&#xff09;cutawk 正则表达式入门常规匹配常用特殊字符 read读取控制台输入 1&#xff09;基本语法 read (选项) (参数) ①选项&#xff1a; -p&#xff1a;指定读取值时的提示…

使用 Parallels Desktop 在 Mac 上畅玩 PC 游戏

我们不再需要接受 “Mac 不是为游戏而打造” 这一事实&#xff1b;Parallels Desktop 通过将电脑变成高性能的游戏设备&#xff0c;从而改变了一切。 Parallels Desktop 充分利用 Mac 硬件的强大功能&#xff0c;让您无缝畅玩 Windows 专享游戏。 性能得到提升&#xff0c;可玩…

顺序栈的操作

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd;既然选择了远方&#xff0c;当不负青春…

国产PLC海为如何与电脑通信

前言 这几天接触到了国产海为PLC&#xff0c;做一个记录&#xff01;学习一下&#xff01; 串口联机 步骤 1&#xff1a;使用 USB 转 485 线连接 A8&#xff08;RS485 通讯口&#xff09;和电脑&#xff1b; 步骤 2&#xff1a;打开 Haiwell happy PLC 编程软件&#xff0c…

【C++】C++11--- 列表初始化|关键字

目录 前言 列表初始化 创建对象时的列表初始化 单参数隐式类型转换 多参数的隐式类型转换 new表达式中使用列表初始化 列表初始化适用于STL 容器 模板类initializer_list 关键字auto 关键字decltype 关键字nullptr 前言 C标准10年磨一剑&#xff0c;第二个真正意义上…

Windows系统完全卸载删除 Node.js (包含控制面板找不到node.js选项情况)

1.打开cmd命令行窗口&#xff0c;输入npm cache clean --force 回车执行 2.打开控制面板&#xff0c;在控制面板中把Node.js卸载 移除之后检查环境变量是否也移除&#xff1a;点击Path&#xff0c;点击编辑。 把环境变量中和node有关的全部移除&#xff0c;然后点击确定。 3.重…

Linux中云盘/磁盘,爆满处理方式

1&#xff1a;du和df命令查看磁盘大小不一致 以下是阿里云服务器云盘使用率 运行 du -sh / 大小为20g 我的服务器大小为40g 按道理说这个云盘使用率应该是百分之五十 而运行 df -h / 这个命令是跟这个云盘使用率差不多的。 1.1分析原因 我安装了mysql&#xff0c;nginx…

能否直接上手 Qt ?——看完 C++ 课本后怎么做?

在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「Qt的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;如果你已经阅读了 C 课本&#xff0c;但仍然感到…

C++进阶之路:深入理解编程范式,从面向过程到面向对象(类与对象_上篇)

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

QX-mini51单片机学习-----(3)流水灯

目录 1宏定义 2函数的定义 3延时函数 4标准库函数中的循环移位函数 5循环移位函数与左移和右移运算符的区别 6实例 7keil中DeBug的用法 1宏定义 是预处理语句不需要分号 #define uchar unsigned char//此时uchar代替unsigned char typedef是关键字 后面是接分号…

04、Kafka集群安装

03、Kafka 集群安装 1、准备工作 首先准备一台虚拟机&#xff0c;centos7系统&#xff0c;先在一台上配置安装后&#xff0c;最后克隆成多台机器。 1.1 安装JDK &#xff08;1&#xff09;下载JDK&#xff0c;上传到 /root/software 路径 下载地址&#xff1a;https://www…

【中级软件设计师】上午题15-计算机网络

上午题15-计算机网络 1 网络设备2 协议簇3 TCP和UDP4 SMTP和POP35 ARP和RARP6 DHCP&#xff08;Dynamic Host Configuration Protocol&#xff09;7 URL8 浏览器9 IP地址和子网划分10 IPv611 Windows命令12 路由器 1 网络设备 物理层设备&#xff1a;中继器、集线器&#xff0…

【Linux】CAN根据时钟频率、波特率计算采样点详解

1、采样点知识回顾 参考博客:【CAN】知识点:帧类型、数据帧结构、传输速率、位时间、采样点 CAN 采样点是指在一个数据位的传输周期内,接收器实际采样数据的时间点。这个时间点是以百分比来表示的,它决定了在数据位的传输周期中,何时读取数据位的值。 正确设置采样点对…

【吃透Java手写】2-Spring(下)-AOP-事务及传播原理

【吃透Java手写】Spring&#xff08;下&#xff09;AOP-事务及传播原理 6 AOP模拟实现6.1 AOP工作流程6.2 定义dao接口与实现类6.3 初始化后逻辑6.4 原生Spring的方法6.4.1 实现类6.4.2 定义通知类&#xff0c;定义切入点表达式、配置切面6.4.3 在配置类中进行Spring注解包扫描…

纯血鸿蒙APP实战开发——Canvas实现模拟时钟案例

介绍 本示例介绍利用Canvas 和定时器实现模拟时钟场景&#xff0c;该案例多用于用户需要显示自定义模拟时钟的场景。 效果图预览 使用说明 无需任何操作&#xff0c;进入本案例页面后&#xff0c;所见即模拟时钟的展示。 实现思路 本例的的主要实现思路如下&#xff1a; …