微信小程序基础工作模板
1.轮播图
点击跳转官方文档
简单例子
<!-- 顶部轮播图 -->
<swiper indicator-dots="true" class="banner" autoplay="true" interval="2000"><swiper-item><image src="../../images/轮播图1.jpg" ></image></swiper-item><swiper-item><image src="../../images/轮播图2.jpg" ></image></swiper-item><swiper-item><image src="../../images/轮播图3.jpg" ></image></swiper-item>
</swiper>
`<swiper>` 组件通常用于实现轮播图效果。
1. indicator-dots="true":
* `indicator-dots` 属性用于控制是否显示面板指示点。
* `true` 表示显示指示点,即在轮播图的下方显示一些小的圆点,每个圆点代表一个轮播项,当前激活的轮播项对应的圆点会被高亮显示。
2. autoplay="true"(通常配合interval使用):
* `autoplay` 属性用于控制是否自动切换轮播项。
* `true` 表示自动切换,即轮播图会自动滚动到下一个轮播项。
3. interval="2000":
* `interval` 属性用于设置自动切换时间间隔,单位是毫秒(ms)。
* 在这个例子中,`interval="2000"` 表示每过 2000 毫秒(即 2 秒)轮播图会自动滚动到下一个轮播项。
2.导航
<!-- 导航图 -->
<view class="body">
<navigator url="../spring/index" class="body-item"><image src="../../images/荠菜(野荠).png" class="pic" ></image><view class="text">春</view>
</navigator>
<navigator url="../summer/index" class="body-item"><image src="../../images/薄荷.png" class="pic"></image><view class="text">夏</view>
</navigator>
<navigator url="../autumn/index" class="body-item"><image src="../../images/苋菜.png" class="pic"></image><view class="text">秋</view>
</navigator>
<navigator url="../winter/index" class="body-item"><image src="../../images/白菜.png" class="pic"></image><view class="text">冬</view>
</navigator>
</view>
样式
下面是对这段代码的详细解释:
-
.body:
display: flex;
:将.body
元素的显示方式设置为Flexbox布局。Flexbox允许你以简单、直观的方式来设计和对齐内容。flex-wrap: wrap;
:这是一个flex容器的属性,它决定了当子元素的总大小超过容器的大小时,子元素应该如何换行。wrap
值意味着子元素将在必要时换行到下一行。width: 100%;
:设置.body
元素的宽度为其父元素宽度的100%。background-color: #ffffff;
:设置.body
元素的背景颜色为白色。padding-top: 25rpx;
:在.body
元素的顶部添加25个rpx(responsive pixel,响应式像素,常用于微信小程序等环境)的内边距。
-
.body-item:
display: flex;
:同样,将.body-item
元素的显示方式设置为Flexbox布局。flex-direction: column;
:这是flex容器的属性,它决定了子元素在主轴上的排列方向。column
值意味着子元素将垂直堆叠(从上到下)。justify-content: center;
:这是flex容器的属性,用于在主轴(对于.body-item
来说,主轴是垂直的)上对齐子元素。center
值意味着子元素将在垂直方向上居中对齐。align-items: center;
:这是flex容器的属性,用于在交叉轴(对于.body-item
来说,交叉轴是水平的)上对齐子元素。center
值意味着子元素将在水平方向上居中对齐。width: 25%;
:设置.body-item
元素的宽度为其父元素宽度的25%。假设.body
元素有4个.body-item
子元素,并且.body
元素的宽度足够大,那么这四个.body-item
元素将并排显示,每个占据一行宽度的四分之一。margin-bottom: 20rpx;
:在.body-item
元素的底部添加20个rpx的外边距。这有助于在垂直方向上分隔不同的.body-item
元素。
简而言之,这段代码创建了一个名为.body
的flex容器,该容器中的子元素将自动换行,并且每个子元素都将垂直和水平居中对齐,占据父容器宽度的25%,并在底部有20rpx的外边距。
3.卡片类(新闻,知识等相似性较强的)
1.在miniprogram创建两个文件夹
一个文件夹,如data,存储数据,一个文件夹,如templates,在里面做组件
2.data:存储封面和详情页的数据
var list = [{id:'34','imgUrl':"../../images/炮仗花.jpg",'imgUrl2':"../../images/炮仗花 (2).jpg",title:"名称:炮仗花",test:"炮仗花",viceTest:"别名:鞭炮花",account:"科类:紫葳科",value:"药用价值:炮仗花有清喉利咽,润肺止咳的功效,治疗肺痨,咽红肿痛和不论新旧的咳嗽",precautions:"注意事项:食用要适量",cooking:"烹饪方式:采摘下来的炮仗花,洗净,去掉花茎,加入面粉、鸡蛋进行煎炸"
}]var summerList = [{id:'100','imgUrl':"../../images/水性杨花.jpg",'imgUrl2':"../../images/水性杨花 (2).jpg",title:"名称:水性杨花",test:"水性杨花",viceTest:"别名:海菜花",value:"食用价值:水性杨花菜具有辅助中和多余胃酸、促进肠道蠕动、调控自身血脂水平的功效",precautions:"注意事项:不宜同猪肝同食 脾胃虚寒、久泄泻者少食",cooking:"烹饪方式:可以凉拌、清炒、煮汤"
}]var autumnList = [{id:'201','imgUrl':"../../images/白茅根.jpg",title:"名称:白茅根",test:"白茅根",viceTest:"别名:毛草根、丝茅根",value:"食用价值:白毛的花苞可以食用,根可入药。有凉血止血,清热通淋的作用",precautions:"注意事项:对于脾胃虚寒,阳虚寒,肾虚寒出血或呕血以及阴寒吐泻等人群不能吃白茅根,容易引发或加重机体的不适症状",cooking:"烹饪方式:洗净即可,可以生食、炖汤,煮水喝"
}]var winterList = [{id:'301','imgUrl':"../../images/刺老包.jpg",title:"名称:刺老包",test:"刺老包",viceTest:"别名:楤木、雀不踏、虎阳刺、通刺、黄龙苞",value:"食用价值:刺老包具有祛风除湿,利水和中,活血解毒等功效,对于风湿关节痛,腰酸背痛,肾虚水肿,消渴,吐血,疟疾,深部脓疡也有一定效果",precautions:"注意事项:注意适量食用,不要食用过量",cooking:"烹饪方式:刺老包的吃法也多种多样,可以炒食、做汤、腌菜、裹面糊油炸等等"
}]module.exports.list = list;
module.exports.summerList = summerList;
module.exports.autumnList = autumnList;
module.exports.winterList = winterList;
module.exports.list = list;
- 创建一个名为
list
的属性在module.exports
对象上。 - 将
list
变量(或对象的值)分配给module.exports.list
。
3. 制造一个名为card的组件
<template name="card"><view class="card"><view class="img"><image src='{{item.imgUrl}}' class="image"></image></view><view class="text"><view>{{item.title}}</view><view class="ViceText">{{item.viceTest}}</view><view class="ViceText">{{item.account}}</view></view></view>
</template>
4.引入模板
<!--wxml引入模板-->
<import src='../../templates/KnowledgeCards/KnowledgeCards.wxml'/>
<view wx:for="{{list}}" wx:key="index" bindtap="tiao" data-mark="{{item.id}}"><template is = 'card' data='{{item}}'></template>
</view>
* `wx:for="{{list}}"`: 这是一个列表渲染指令。它告诉小程序遍历`list`数组,并为数组中的每个元素创建一个`<view>`组件的副本。 * `wx:key="index"`: 当使用`wx:for`时,最好为每一个循环的项指定一个唯一的标识符,以便小程序可以更有效地更新视图。在这里,我们使用了数组的索引作为键。
/* wxss引入模板 */
@import '../../templates/KnowledgeCards/KnowledgeCards.wxss';
// pages/spring/index.js
//引入其他模块
var list = require('../../data/cardList.js')
Page({data: {list:list.list},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log(list);},//跳转页面---详情页tiao:function(e) {console.log(e.currentTarget.dataset.mark)wx.navigateTo({url: '../detail/detail?mark=' + e.currentTarget.dataset.mark,})},
})
5.详情页 ,点击封面达到跳转对应数据的效果,只需做一个detail设计
<!--wxml引入模板-->
<import src='../../templates/KnowledgeCards/KnowledgeCards.wxml'/>
<view wx:for="{{list}}" wx:key="index" bindtap="tiao" data-mark="{{item.id}}"><template is = 'card' data='{{item}}'></template>
</view>
* `bindtap="tiao"`: 当用户点击这个`<view>`组件时,会触发一个名为`tiao`的事件处理函数。 * `data-mark="{{item.id}}"`: 这是一个自定义数据属性。它的值设置为当前遍历到的数组元素的`id`属性。这可以在事件处理函数`tiao`中通过`e.currentTarget.dataset.mark`访问。
tiao:function(e) {console.log(e.currentTarget.dataset.mark)wx.navigateTo({url: '../detail/detail?mark=' + e.currentTarget.dataset.mark,})},
<!--pages/detail/detail.wxml-->
<!-- 标题 -->
<view class="title">{{dataList.test}}</view>
<image src = '{{dataList.imgUrl}}' class="image"></image>
<view class="subTitle"><view>{{dataList.viceTest}}</view><view class="value">{{dataList.account}}</view>
</view>
<view class="value">{{dataList.value}}</view>
<view class="value">{{dataList.precautions}}</view>
<view class="value">{{dataList.cooking}}</view>
<image src = '{{dataList.imgUrl2}}' class="image2"></image>
相关文章:
微信小程序基础工作模板
1.轮播图 点击跳转官方文档 简单例子 <!-- 顶部轮播图 --> <swiper indicator-dots"true" class"banner" autoplay"true" interval"2000"><swiper-item><image src"../../images/轮播图1.jpg" >…...
简单说一下STL中的map容器的特点、底层实现和应用场景【面试】
特点: 基于红黑树:std::map利用红黑树的自平衡特性,确保操作的平衡性。有序容器:元素根据键的顺序自动排序,排序依据是预定义的键比较函数。唯一键值:容器保证每个键的唯一性,不允许重复键存在…...
Ubuntu22.04之有道词典无法画词翻译替代方案(二百四十九)
简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…...
AnythingLLM 的 Docker 使用
AnythingLLM是使用大语言模型LLM的一站式简便框架。官网的介绍如下: AnythingLLM is the easiest to use, all-in-one AI application that can do RAG, AI Agents, and much more with no code or infrastructure headaches. 1. 使用官方docker 最方便的方法是使…...
数组还可以这样用!常用但不为人知的应用场景
哈喽,各位小伙伴们,你们好呀,我是喵手。运营社区:C站/掘金/腾讯云;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点,并以文字的形式跟大家一起交流,互相学习,一…...
C++模板元编程:编译时的魔法
1. 引言 在C的世界中,模板元编程是一种在编译时执行计算的强大技术。它允许开发者编写高度灵活和高效的代码,这些代码可以在不牺牲性能的前提下,根据类型和值的不同而变化。本文将深入探讨模板元编程的奥秘,并展示如何在现代C开发…...
SQL进阶day10————多表查询
目录 1嵌套子查询 1.1月均完成试卷数不小于3的用户爱作答的类别 1.2月均完成试卷数不小于3的用户爱作答的类别 编辑1.3 作答试卷得分大于过80的人的用户等级分布 2合并查询 2.1每个题目和每份试卷被作答的人数和次数 2.2分别满足两个活动的人 3连接查询 3.1满足条件…...
debug调试_以Pycharm为例
文章目录 作用步骤打断点调试调试窗口 作用 主要是检查逻辑错误,而非语法错误。 步骤 打断点 在需要调试的代码行前打断点,执行后会停顿在断点位置(不运行) 调试 右键“debug”,或者直接点击右上角的小虫子 调试…...
wms第三方海外仓系统:如何为中小型海外仓注入新活力
对于中小型海外仓来说,想在大型集团海外仓同台竞争中获得优胜,提升其管理效率是非常关键的一环。 我们所熟知的wms系统,也就是第三方成熟海外仓系统,正是这些海外仓企业提升管理水平、降低成本的重要工具。 1、wms第三方海外仓系…...
html是什么?http是什么?
html Html是什么?http是什么? Html 超文本标记语言;负责网页的架构; http((HyperText Transfer Protocol)超文本传输协议; https(全称:Hypertext Transfer Protocol …...
L1-007 念数字js实现
异步解法 const readline require("readline"); const rl readline.createInterface({input: process.stdin,output: process.stdout, }); const input_arr [];//储存数据 rl.on(line, function (line) {input_arr.push(line); } ); rl.on(close, function () {/…...
Perl 运算符
Perl 运算符 Perl 是一种功能强大的编程语言,广泛应用于系统管理、网络编程、GUI 创建、数据库访问等众多领域。Perl 的语法灵活,支持多种编程范式,包括过程式、面向对象和函数式编程。在 Perl 中,运算符扮演着重要的角色&#x…...
语法04 C++ 标准输入语句
标准输入 使用格式:cin >> 输入的意思就是把一个值放到变量里面去,也就是变量的赋值,这个值是由我们自己输入的。 (注意:输入变量前要先定义,输入完之后要按Enter键。) 输入多个变量,与输出类似,…...
python数据分析--- ch6-7 python容器类型的数据及字符串
python数据分析---ch6-7 python容器类型的数据及字符串 1. Ch6--容器类型的数据1.1 序列1.1.1 序列的索引操作1.1.2 加和乘操作1.1.3 切片操作1.1.4 成员测试 1.2 列表1.2.1 创建列表1.2.2 追加元素1.2.3 插入元素1.2.4 替换元素1.2.5 删除元素1.2.6 列表排序(1&…...
【Linux取经路】守护进程
文章目录 一、前台进程和后台进程二、Linux 的进程间关系三、setsid——将当前进程设置为守护进程四、daemon——设置为守护进程五、结语 一、前台进程和后台进程 Linux 中每一次用户登录都是一个 session,一个 session 中只能有一个前台进程在运行,键盘…...
Nginx之文件下载服务器
1.概述 在对外分享文件时,利用Nginx搭建一个简单的下 载文件管理服务器,文件分享就会变得非常方便。利 用Nginx的诸多内置指令可实现自动生成下载文件列表 页、限制下载带宽等功能。配置样例如下: server {listen 8080;server_name localhos…...
OpenCV学习(4.11) OpenCV中的图像转换
1. 目标 在本节中,我们将学习 使用OpenCV查找图像的傅立叶变换利用Numpy中可用的FFT功能傅立叶变换的一些应用我们将看到以下函数:**cv.dft()** ,**cv.idft()** 等 理论 傅立叶变换用于分析各种滤波器的频率特性。对于图像,使用…...
2024.6.13每日一题
LeetCode 子序列最大优雅度 题目链接:2813. 子序列最大优雅度 - 力扣(LeetCode) 题目描述 给你一个长度为 n 的二维整数数组 items 和一个整数 k 。 items[i] [profiti, categoryi],其中 profiti 和 categoryi 分别表示第 i…...
Linux命令详解(2)
文本处理是Linux命令行的重要应用之一。通过一系列强大的命令,用户可以轻松地对文本文件进行编辑、查询和转换。 cat: 这个命令用于查看文件内容。它可以一次性显示整个文件,或者分页显示。此外,cat 还可以用于合并多个文件的内容…...
iOS ReactiveCocoa MVVM
学习了在MVVM中如何使用RactiveCocoa,简单的写上一个demo。重点在于如何在MVVM各层之间使用RAC的信号来更方便的在各个层之间进行响应式数据交互。 demo需求:一个登录界面(登录界面只有账号和密码都有输入,登录按钮才可以点击操作)࿰…...
图文解析ASN.1中BER编码:结构类型、编码方法、编码实例
本文将详细介绍ASN.1中的BER编码规则,包括其编码机制、数据类型表示、以及如何将复杂的数据结构转换为二进制数据。通过本文的阅读,读者将对ASN.1中的BER编码有一个全面的理解。 目录 一.引言 二.BER编码基本结构 ▐ 1. 类型域(Type&#…...
jQuery如何停止动画队列
在jQuery中,你可以使用.stop()方法来停止动画队列。.stop()方法有几个可选的参数,可以用来控制停止动画的方式。 以下是.stop()方法的基本用法和一些参数选项: 无参数:立即停止当前动画,并跳到最后的状态。后续的动画…...
vue3+electron搭建桌面软件
vue3electron开发桌面软件 最近有个小项目, 客户希望像打开 网易云音乐 那么简单的运行起来系统. 前端用 Vue 会比较快一些, 因此决定使用 electron 结合 Vue3 的方式来完成该项目. 然而, 在实施过程中发现没有完整的博客能够记录从创建到打包的流程, 摸索一番之后, 随即梳理…...
oracle常用经典SQL查询
oracle常用经典SQL查询(转贴) oracle常用经典SQL查询 常用SQL查询: 1、查看表空间的名称及大小 select t.tablespace_name, round(sum(bytes/(1024*1024)),0) ts_size from dba_tablespaces t, dba_data_files d where t.tablespace_name d.tablespace_name grou…...
Android shell 常用 debug 命令
目录 1、查看版本2、am 命令3、pm 命令4、dumpsys 命令5、sed命令6、log定位查看APK进程号7、log定位使用场景 1、查看版本 1.1、Android串口终端执行 getprop ro.build.version.release #获取Android版本 uname -a #查看linux内核版本信息 uname -r #单独查看内核版本 1.2、…...
Unity3D Shader数据传递语法详解
在Unity3D中,Shader是用于渲染图形的一种程序,它定义了物体在屏幕上的外观。Shader通过接收输入数据(如顶点位置、纹理坐标、光照信息等)并计算像素颜色来工作。为了使得Shader能够正确运行并产生期望的视觉效果,我们需…...
计算机组成原理(五)
一、链式查询方式 接口的优先级固定不变 在链式查询的情况下,设备的优先级通常与其在链中的位置有关。具体来说,越靠近查询链的起始位置的设备通常具有较高的优先级,而越靠近链的末尾位置的设备优先级较低。 优点: 简单实现&am…...
后端项目实战--瑞吉外卖项目软件说明书
瑞吉外卖项目软件说明书 一、项目概述 瑞吉外卖项目是一个外卖服务平台,用户可以通过该平台浏览餐厅菜单、下单、支付以及追踪订单状态。产品原型就是一款产品成型之前的一个简单的框架,就是将页面的排版布局展现出来,使产品得初步构思有一…...
LeetCode | 27.移除元素
这道题的思路和26题一模一样,由于要在元素组中修改,我们可以设置一个index表示目前要修改原数组的第几位,由于遍历,访问原数组永远会在我们修改数组之前,所以不用担心数据丢失的问题,一次遍历数组ÿ…...
为什么要选择AWS?AWS的优势有哪些?
亚马逊云服务器(Amazon Web Services,AWS)是全球领先的云计算服务提供商之一,其提供的云服务器是在全球范围内可用的弹性计算服务。对于很多用户来说,他们可能会担心亚马逊云服务器是否会对服务器的使用进行限制。以下…...
驻马店 网站建设/企业内训课程
关于HTTP/2,最近你可能没少听到过他,首先,如果你了解过Java 9的特性,那么你会发现在Java9中,提供了新的方式来处理HTTP调用,提供了新的HTTP Client,将替代HttpURLConnection,并提供对…...
wordpress+文章输出/百度做推广一般要多少钱
命令模式(commandPattern)是一种数据驱动的设计模式。请求以命令的形式包裹在对象中,并传给调用对象。调用对象寻找可以处理该命令合适的对象,并把该命令传给相应的对象,该对象执行命令。 1. 介绍 意图:将…...
想建个图片网站/网络营销平台名词解释
out_sa()函数报文封装思想讲解 1. out_sa前言 我已经在上一篇文章中将in_struct函数的基本原理进行了阐述,而out_struct()的实现基本是相同的,如果能理解in_struct()函数,那么自己再去看out_struct、out_raw、out_ge…...
锦州网站建设预订/网页设计个人主页
一个整数总能够拆分为2的幂的和。比如: 7124 71222 71114 711122 7111112 71111111 总共同拥有6种不同的拆分方式。 再比方:4能够拆分成:4 4,4 1 1 1 1,4 2 2,4112。用f(n)表示n的不同拆分的种…...
专门做网站的公司与外包公司/seo搜索引擎优化培训班
昨天公司的ip进行了修改,在今天从远程提取代码的过程中提示network error connection timed out错误,从网上看了一下解决方法 1:打开项目文件夹,点击查看 2:勾选隐藏的项目 3:进入下图所示的文件目录下&…...
怎样做pdf电子书下载网站/百度收录时间
7.C循环语句重复做一件事情是令人痛苦的,要不然老师也不会罚抄作业100遍了。如果让小孩从1数到100就给糖吃,她肯定欣然接受,但如果让她数到1000就一定要反抗了。生活中很多时候重复做一件事是不可避免的,比如交通信号灯的切换&…...