当前位置: 首页 > news >正文

微信小程序 首页之轮播图和搜索框 代码分享

注意!!!

只有样式,还没功能开发!!!

index.wxml

<!-- 搜索框 -->
<view class="search"><input placeholder="请输入搜索的内容"></input><image src="cloud://cloud1-9gcgvxkfa8171ca2.636c-cloud1-9gcgvxkfa8171ca2-1309683288/img/search.png"style=" width: 50rpx; height: 50rpx; "></image>
</view><!-- 轮播图 -->
<view class="banner"><swiper style="height: 300rpx; width: 800rpx; border: 10rpx;" autoplay circular interval="2000"><swiper-item wx:for="{{banner}}" ><image src="{{item.src}}" class="img"></image></swiper-item></swiper>
</view>

index.js

// index.js
wx.cloud.init({env: 'cloud1-9gcgvxkfa8171ca2', //填上自己的的云开发环境idtraceUser: true,})
const db = wx.cloud.database()
Page({data: {banner: []},onLoad: function() {let that = thisdb.collection('swiper').get({success:function(res){console.log('轮播图获取成功', res)that.setData({banner: res.data})},fail:function(res){console.log('轮播图获取失败', res)},})}
})

index.wxss

/**index.wxss**/
page {height: 100vh;display: flex;flex-direction: column;
}
/* 搜索框 */
.search {width: 80%;height: 60rpx;display: flex;flex-direction: row;border: 1px solid slategray;border-radius: 50rpx;padding-left: 50rpx;padding-right: 40rpx;align-items: center;align-self: center;justify-content: space-between;
}/* 首页轮播图 */
.banner {width: 90%;display: flex;align-self: center;margin-top: 50rpx;
}
/* 图片高度宽度 */
.img {height: 300rpx;width: 700rpx;border-radius: 10rpx;
}

相关文章:

微信小程序 首页之轮播图和搜索框 代码分享

注意&#xff01;&#xff01;&#xff01; 只有样式&#xff0c;还没功能开发&#xff01;&#xff01;&#xff01; index.wxml <!-- 搜索框 --> <view class"search"><input placeholder"请输入搜索的内容"></input><imag…...

3D可视化编辑器模版

体验地址&#xff1a;http://mute.turntip.cn 整个搭建平台核心模块包含如下几个部分&#xff1a; 3D场景渲染 组件拖拽系统 元素编辑功能 状态管理 历史记录与撤销/重做 技术栈 前端框架与库 React 18 用于构建用户界面的JavaScript库 Next.js 14 React框架&#xff0c;提供服…...

foc控制 - clarke变换和park变换

1. foc控制框图 下图是foc控制框图&#xff0c;本文主要是讲解foc控制中的larke变换和park变换clarke变换将 静止的 a b c abc abc坐标系 变换到 静止的 α β αβ αβ坐标系&#xff0c;本质上还是以 定子 为基准的坐标系park变换 则将 α β αβ αβ坐标系 变换到 随 转…...

DeepSeek: 探索未来的深度学习搜索引擎

深度学习驱动的下一代搜索引擎&#xff1a;DeepSeek 在信息爆炸的时代&#xff0c;搜索引擎作为连接用户与互联网世界的桥梁&#xff0c;其重要性不言而喻。然而&#xff0c;随着用户需求的日益多样化和复杂化&#xff0c;传统搜索引擎在理解和满足用户需求方面逐渐显现出局限…...

如何在本地部署小智服务器:从源码到全模块运行的详细步骤

小智聊天机器人本地后台服务器源码全模块部署 作者&#xff1a;林甲酸 -不是小女子也不是女汉子 是大女子 更新日期&#xff1a;2025年4月29日 &#x1f3af; 前言&#xff1a;为什么要写这篇教程&#xff1f; 上周按照虾哥小智服务器的教程去部署本地后台&#xff0c;我用的是…...

基于论文的大模型应用:基于SmartETL的arXiv论文数据接入与预处理(四)

上一篇介绍了基于SmartETL框架实现arxiv采集处理的基本流程&#xff0c;通过少量的组件定制开发&#xff0c;配合yaml流程配置&#xff0c;实现了复杂的arxiv采集处理。 由于其业务流程复杂&#xff0c;在实际应用中还存在一些不足需要优化。 5. 基于Kafka的任务解耦设计 5.…...

GrapesJS 终极定制组件设计方案:扁平化对象属性编辑、多区域拖拽、多层嵌套与组件扩展实战

掌握 GrapesJS 复杂组件实用技巧&#xff0c;打造高复用、高交互的前端低代码组件体系 随着低代码可视化编辑需求日益提升&#xff0c;GrapesJS 作为优秀开源画布编辑器&#xff0c;灵活的组件机制是其核心优势。但在实际项目中&#xff0c;你可能会遇到&#xff1a; 如何编辑…...

Spring MVC 如何映射 HTTP 请求到 Controller 方法?

我们来详细分析一下如何在 Spring MVC 中将 HTTP 请求映射到 Controller 的处理方法&#xff08;Handler Methods&#xff09;上&#xff0c;以及 RequestMapping 注解的使用方法。 请求映射的核心&#xff1a;RequestMapping 注解 RequestMapping 是 Spring MVC 中最核心、最…...

vue.js中的一些事件修饰符【前端】

不要一直责怪过去的自己&#xff0c;他独自站在雾里也很迷茫。 目录 .stop&#xff1a;.prevent&#xff1a;.self&#xff1a;.once&#xff1a;.capture&#xff1a;.native&#xff1a;何时使用 .native&#xff1f; .stop&#xff1a; 作用&#xff1a;调用 event.stopPro…...

WEBSTORM前端 —— 第2章:CSS —— 第4节:盒子模型

目录 1.画盒子 2.Pxcook软件 3.盒子模型——组成 4.盒子模型 ——边框线 5.盒子模型——内外边距 6.盒子模型——尺寸计算 7.清除默认样式 8.盒子模型——元素溢出 9.外边距问题 ①合并现象 ②塌陷问题 10.行内元素——内外边距问题 11.盒子模型——圆角 12.盒子…...

Cursor —— AI编辑器 使用详解

Cursor - The AI Code Editor 一、Cursor 是什么&#xff1f; Cursor 是一款优秀的AI代码编辑器&#xff0c;它内置了 Deepseek-R1、GPT-4、Claude等 AI 模型。 简单说&#xff0c;就是&#xff1a;Cursor VS Code 编辑器 AI 大模型 Cursor 功能特性&#xff08;代码补全、…...

故障诊断——复现github代码ClassBD-CNN(BDCNN)

刚好看到这篇文献有github代码&#xff0c;而且也比较新&#xff0c;感觉可以当作自己论文中的对比方法。 https://www.sciencedirect.com/science/article/pii/S0888327024006484 &#xff08;论文地址&#xff09; &#xff08;看到4090&#xff0c;有点想劝退自己......&…...

局部和整体的关系

Prompt&#xff1a;为什么要研究局部和整体的关系呢&#xff1f;是因为很多情况下&#xff0c;局部就能表达出整体&#xff1f; 这是一个非常本质的问题&#xff0c;其实你已经接近数学和物理中“几何本质”的核心了。我们研究局部和整体的关系&#xff0c;是因为&#xff1a;…...

1.5 点云数据获取方式——双目立体相机

图1-5-1 双目立体相机 双目相机通过模拟人眼立体视觉,利用两个摄像头的视差信息计算物体深度,进而生成 3D 点云,具有成本低、体积小、信息丰富等优势,成为中...

Flume启动报错

报错1&#xff1a; 报错2&#xff1a; File Channel transaction capacity cannot be greater than the capacity of the channel capacit... 解决方案&#xff1a;删除配置...

leetcode 21. 合并两个有序链表(c++解法+相关知识点复习)

目录 题目 所需知识点复习 1.链表 1.1单链表 1.2哑结点&#xff08;Dummy Node&#xff09; 解答过程 1.循环双指针解法 2.递归解法 2025.4.29想到其他知识点会后续再继续补充。 题目 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表…...

链表反转_leedcodeP206

P206反转链表 原题 反转思路 将链表反转的过程分为两个区域&#xff1a; &#x1f7e6; 未反转区&#xff08;待处理&#xff09; 原链表中还没有处理&#xff08;还没有反转指针方向&#xff09;的部分&#xff0c;从 current 开始一直到链表尾部。 &#x1f7e9; 已反转…...

Laravel+API 接口

LaravelAPI 接口 网课连接&#xff1a;BIlibili. 中文文档. 1.RestFul Api编码风格 一、API设计 修改hosts&#xff0c;C:\Windows\System32\drivers\etc\hosts&#xff0c;增加127.0.0.1 api.lv8.com # Laravel 框架 用这个域名来测试&#xff08;推荐规范&#xff09; 在…...

在 Ubuntu 上离线安装 ClickHouse

在 Ubuntu 上离线安装 ClickHouse 的步骤如下: 一.安装验证 # 检查服务状态 sudo systemctl status clickhouse-server #删除默认文件 sudo rm /etc/clickhouse-server/users.d/default-password.xml # 使用客户端连接 clickhouse-client --password...

【AI微信小程序开发】掷骰子小程序项目代码:自设骰子数量和动画(含完整前端代码)

系列文章目录 【AI微信小程序开发】AI减脂菜谱小程序项目代码:根据用户身高/体重等信息定制菜谱(含完整前端+后端代码)【AI微信小程序开发】AI菜谱推荐小程序项目代码:根据剩余食材智能生成菜谱(含完整前端+后端代码)【AI微信小程序开发】图片工具小程序项目代码:图片压…...

Linux-02-VIM和VI编辑器

第一节:什么是VI和VIM编辑器: VI是Unix和类Unix操作系统中出现的通用的文本编辑器。VIM是从VI发展出来的一个性能更强大的文本编辑器可以主动的以字体颜色辨别语法的正确性,方便程序设计,VIM和VI编辑器完全兼容。使用:vi xxx文件 或者vim xxx文件,简单来说就是用来编辑文件的一…...

同为科技 智能PDU产品选型介绍-EN10/G801FR

随着各行业对数据中心机房重视程度的不断提高&#xff0c; 加强机柜微环境及电源计量、监控和管理则十分必要。在新型微模块化数据中心供配电系统建设中&#xff0c;UPS电源、智能PDU、监控管理系统、资产管理等产品早已成为IDC机房不可或缺的部分。其中&#xff0c;智能PDU通过…...

NS-SWIFT微调Qwen3

目录 一、NS-SWIFT简介 二、Qwen3简介 三、微调Qwen3 1、安装NS-SWIFT环境 2、准备训练数据 3、Lora微调 4、GROP训练 5、Megatron并行训练 一、NS-SWIFT简介 SWIFT&#xff08;Scalable lightWeight Infrastructure for Fine-Tuning&#xff09;是魔搭ModelScope开源社…...

借 AI 热潮,深挖 [风车 AI ] 为跨境电商打造的图片翻译黑科技

家人们&#xff0c;这几年 AI 技术简直像坐了火箭一样飞速发展&#xff0c;生活里、工作中到处都能看到它的身影。对咱们跨境行业来说&#xff0c;语言翻译一直是个让人头疼的大问题。今天咱就借着这股 AI 热潮&#xff0c;好好深挖一下风车 AI 为跨境打造的那些超厉害的翻译黑…...

uni-app 中封装全局音频播放器

在开发移动应用时&#xff0c;音频播放功能是一个常见的需求。无论是背景音乐、音效还是语音消息&#xff0c;音频播放都需要一个稳定且易于管理的解决方案。在 uni-app 中&#xff0c;虽然原生提供了 uni.createInnerAudioContext 方法用于音频播放&#xff0c;但直接使用它可…...

Uniapp:设置TabBar

目录 一、setTabBarBadge:增加文本二、removeTabBarBadge:移除文本三、showTabBarRedDot:显示红点四、hideTabBarRedDot:隐藏红点一、setTabBarBadge:增加文本 为 tabBar 某一项的右上角添加文本。 uni.setTabBarBadge({index: 0,text: 1 })参数类型必填说明indexNumber…...

如何查看k8s获取系统是否清理过docker镜像

k8s集群某个节点down掉后&#xff0c;pod就会漂移到其他节点&#xff0c;但是在该节点却又执行了拉取镜像操作&#xff0c;明明该节点之前部署过该容器的&#xff0c;不知为什么又拉取了一次镜像&#xff08;镜像拉取配置的优先使用本地&#xff09;&#xff0c;所以怀疑是触发…...

【Linux网络】深入解析I/O多路转接 - Select

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;博客仓库&#xff1a;https://gitee.com/JohnKingW/linux_test/tree/master/lesson &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &…...

如何解决 Xcode 签名证书和 Provisioning Profile 过期问题

在 iOS 应用开发过程中&#xff0c;签名证书和 Provisioning Profile 是确保应用安全性和合法性的关键组件。然而&#xff0c;当这些证书或配置文件过期时&#xff0c;开发者可能会遇到编译或归档失败的问题。本文将详细介绍如何解决 Xcode 中“iOS Distribution”证书未找到和…...

[C++]C++20协程的原理

文章目录 协程的状态机Promise 对象挂起和恢复机制协程的执行流程示例代码分析 C 协程是 C20 引入的一项重要特性&#xff0c;它提供了一种更简洁、高效的异步编程方式。下面从协程的状态机、Promise 对象、挂起和恢复机制等方面介绍其底层实现原理。 协程的状态机 从底层角度…...

Oracle OCP证书有效期是三年?

这一段时间&#xff0c;网上经常传出消息Oracle OCM认证证书有效期为三年&#xff0c;其实这个假消息&#xff0c;通过博睿谷与Oracle官方人员确认&#xff0c;OCP认证证书有效期是永久的。 OCP证书本身永久有效&#xff0c;但老版本的OCP证书代表着更多的项目经验&#xff0c…...

2025.4.29_STM32_看门狗WDG

1.WDG简介 大概意思就是给看门狗设置一个时间范围&#xff0c;在这个范围内必须喂狗(重置定时器)&#xff0c;这个操作必须一直执行&#xff0c;比如看门狗的的时间范围是1-2秒&#xff0c;我们就必须间隔1-2秒就喂一次狗&#xff0c;否则它自减到0时就会重置电路&#xff0c;相…...

基于Java,SpringBoot,HTML水文水质监测预警系统设计

摘要 随着水资源管理需求的日益增长&#xff0c;构建高效、精准的水文监测预警系统至关重要。本文设计并实现了一套基于 Java、SpringBoot 和 HTML 技术的水文监测预警系统。系统采用 Java 语言与 SpringBoot 框架搭建后端服务&#xff0c;利用其强大的业务逻辑处理能力与高效…...

Qt开发:JSON字符串的序列化和反序列化

文章目录 一、构建和解析单个JSON对象二、JSON对象中嵌套多个JSON对象三、JSON对象中组建多个数组对象四、构建和解析数组对象 一、构建和解析单个JSON对象 1.1 JSON对象的构建 使用key-value形式生成JSON对象 #include <QJsonObject> #include <QJsonDocument> …...

第10次:电商项目配置开发环境

本次内容主要为给整个电商项目配置好开发环境&#xff0c;包括如下环节&#xff1a; 创建电商项目xiaoyu_mall&#xff0c;Django版本默认是最新的大版本5.2配置应用目录&#xff0c;因项目会涉及到多个应用&#xff0c;为保证项目结构清晰&#xff0c;将在项目下建立apps目录…...

【强化学习系列】Q-learning——从贝尔曼最优方程谈起

引言 上一篇贝尔曼最优方程中我们已经推导出动作价值形式的贝尔曼最优方程&#xff1a; q π ∗ ( s , a ) ∑ s ′ ∈ S ∑ r ∈ R p ( s ′ , r ∣ s , a ) [ r γ max ⁡ a ′ q π ∗ ( s ′ , a ′ ) ] \begin{equation}q_{\pi^*}(s,a)\sum_{s\in S}\sum_{r\in R}p(s,…...

Java 基础--运算符全解析

【Java 基础】Java 运算符全解析&#xff1a;程序世界的“加减乘除”与“是非对错” 作者&#xff1a;IvanCodes 发布时间&#xff1a;2025年4月29日&#x1f423; 专栏&#xff1a;Java教程 嗨&#xff0c;各位 Java 探险家们&#xff01;&#x1f44b; 掌握了变量、数据类…...

【神经网络与深度学习】改变随机种子可以提升模型性能?

引言 随机种子在机器学习和数据处理领域中至关重要&#xff0c;它决定了模型训练、数据划分以及参数初始化的随机性。虽然固定随机种子能确保实验的可重复性&#xff0c;但改变随机种子有时会意外提升模型性能。本文将探讨这一现象的潜在原因&#xff0c;并揭示随机性如何影响…...

一页概览:统一数据保护方案

2010年左右手绘&#xff0c;用的是公司的信纸&#xff0c;签字笔&#xff0c;马克笔。方案为统一数据保护。其实解释备份软件加备份硬件&#xff08;支持重复数据删除&#xff09;的联合解决方案。...

Python中的itertools模块常见函数用法示例

itertools &#xff0c;迭代工具模块&#xff0c;提供了用于高效处理迭代器和组合问题的工具。 1. itertools.permutations(iterable, rNone) 功能&#xff1a;生成输入迭代器的所有可能排列。 参数&#xff1a; iterable&#xff1a;输入的可迭代对象。r&#xff1a;可选参数…...

微服务学习笔记

1 微服务 微服务&#xff1a;基于业务领域建模的、可独立发布的服务&#xff0c;把业务内聚的功能封装起来&#xff0c;并通过网络供其他服务访问。 好处&#xff1a; 技术异构性&#xff0c;不同服务可以使用不同的技术弹性&#xff0c;可以更好的处理服务不可用的问题扩展…...

实验七:基于89C51和DS18B20的温度采集与显示

一、实验目的 学习使用DS18B20数字温度传感器采集温度数据。使用4位共阳极数码管显示温度数据,显示精度到小数点后两位。熟悉89C51单片机的I/O口操作和位选控制。二、实验器材 89C51单片机开发板DS18B20数字温度传感器4位共阳极数码管三极管8550(用于位选驱动)电阻、电容等辅…...

cmake:基础

本文主要探讨cmake语法相关知识。 cmake(GUI)安装 apt install cmake-curses-gui cmake -y cmake语法 cmake_minimum_required(VERSION 版本号) 设置cmake最低版本 project(工程名) <> PROGECT_NAME/CMAKE_PROJECT_NAME 设置工程名字 add_library(库名 SHARED/STAT…...

1.8 点云数据获取方式——小结

点云&#xff0c;作为三维空间信息的直观载体&#xff0c;在各行各业都得到了广泛应用。而能够获得三维点云数据手段&#xff0c;也是极为丰富。本章节主要介绍了主动式手段&#xff08;包括激光雷达、ToF相机、结构光相机&#xff09;和被动式手段&#xff08;双目立体相机、单…...

超越单体:进入微服务世界与Spring Cloud概述

大家好&#xff01;欢迎来到我的新系列文章——《微服务架构&#xff1a;Spring Cloud实战指南》。在之前的《Java服务端核心技术》系列中&#xff0c;我们一起深入学习了如何使用Spring Boot构建功能强大、安全可靠的单体应用程序。我们掌握了Spring的核心原理、Web开发、数据…...

深度学习篇---模型权重变化与维度分析

文章目录 前言1. 权重的作用2. 权重的维度全连接层卷积层3. 权重的变化4.实例代码(PyTorch 框架)场景代码解释模型定义数据生成优化设置初始权重设置训练循环前向传播反向传播更新权重结果输出维度与变化总结维度匹配梯度跟新5. 增加网络深度:多层感知机(MLP)代码解释6. 权…...

AtCoder Beginner Contest 403(题解ABCDEF)

A - Odd Position Sum #1.奇数数位和 #include<iostream> #include<vector> #include<stdio.h> #include<map> #include<string> #include<algorithm> #include<queue> #include<cstring> #include<stack> #include&l…...

计算机视觉与深度学习 | 双目立体匹配算法理论+Opencv实践+matlab实践

双目立体匹配 一、双目立体匹配算法理论与OpenCV、matlab实践一、双目立体匹配理论二、OpenCV实践三、优化建议四、算法对比与适用场景二、双目立体匹配算法理论及Matlab实践指南一、双目立体匹配理论二、Matlab实践步骤三、算法对比与优化建议四、完整流程示例五、常见问题与解…...

深挖Java基础之:认识Java(创立空间/先导:Java认识)

今天我要介绍的是在Java中对Java的一些基本语法的认识与他们的运用&#xff0c;以及拟举例子说明和运用场景&#xff0c;优势和劣势&#xff0c; 注&#xff1a;本篇文章是对Java的一些基本的&#xff0c;简单的代码块的一些内容&#xff0c;后续会讲解在Java中的变量类型&…...

springmvc从请求到响应的流程分析

一、创建springmvc项目 通过网盘分享的文件&#xff1a;hello-springmvc.zip 链接: https://pan.baidu.com/s/1VmUHurgph661ND9LWqKhaw 提取码: b36a 二、从请求到响应流程 我们先画一下流程图&#xff0c;如下图所示。 三、源码解析 3.1 HttpServlet接收请求 用户发送htt…...