微信小程序广告banner、滚动屏怎么做?

news2024/11/17 10:02:31

使用滑块视图容器swiper和swiper-item可以制作滚动屏,代码如下:

wxml:

<swiper indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="white" autoplay interval="3000">
   <swiper-item>
    <image src=""fakepath://展厅绘制.jpg"/>
  </swiper-item>
  <swiper-item>
    <image src=""fakepath://展会名片.jpg"/>
  </swiper-item>
  <swiper-item>
    <image src=""fakepath://签到.jpg" />
  </swiper-item>
  <swiper-item>
    <image src="fakepath://抽奖.jpg" />
  </swiper-item>
  <swiper-item>
    <image src="fakepath://礼品领取.jpg"/>
  </swiper-item>
</swiper>

wxss:

swiper image{
  width: 100%;
  height: 100%;
}

效果如下:

其中,swiper常用参数如下,其中只可放置swiper-item组件,否则会导致未定义的行为。:

属性类型默认值必填说明
indicator-dotsbooleanFALSE是否显示面板指示点
indicator-colorcolorrgba(0, 0, 0, .3)指示点颜色
indicator-active-colorcolor#000000当前选中的指示点颜色
autoplaybooleanFALSE是否自动切换
currentnumber0当前所在滑块的 index
intervalnumber5000自动切换时间间隔
durationnumber500滑动动画时长

 swiper使用细节可见官方文档:

视图容器 / swiper (qq.com)

微信小程序教程,欢迎关注我!

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

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

相关文章

达梦数据库安装

一、官网参考文档 达梦数据库官网&#xff1a;https://www.dameng.com/ &#xff0c;参考文档如下&#xff1a; 最后的文档地址为&#xff1a;Docker安装 | 达梦技术文档 二、dcoker安装 docker基本按照官网来就行&#xff0c;点击相应的链接下载镜像包。 复制到linux中&#x…

基于卷积神经网络和客源注意力机制的OD客流预测模型

文章信息 论文题目为《An origin–destination passenger flow prediction system based on convolutional neural network and passenger source-based attention mechanism》&#xff0c;该文于2023年发表于Expert Systems With Applications期刊上。文章提出一种基于乘客源注…

成都瀚网科技有限公司抖音带货正规

随着互联网的蓬勃发展&#xff0c;越来越多的公司开始利用网络平台进行产品销售。其中&#xff0c;抖音作为一款广受欢迎的短视频平台&#xff0c;已经成为众多商家眼中的“香饽饽”。在这场电商狂欢中&#xff0c;成都瀚网科技有限公司&#xff08;以下简称“瀚网科技”&#…

果园自主跟随碎枝机器人

开发背景 农业扶贫项目—— 开发一款适用于猕猴桃果园的跟随碎枝机器人。 在猕猴桃的种植培育过程中&#xff0c;一项非常重要的环节便是剪枝&#xff0c;通常有冬剪和夏剪。以往果农剪完枝条后要将散落于地的枝条归拢后统一粉碎还田。这需要专门收集地面上的枝条并将其归拢到…

Ubuntu环境下为串口设置别名

本文介绍Ubuntu环境下为串口设置别名。 Ubuntu环境下&#xff0c;有时候开发调试会使用到USB转串口&#xff0c;本文介绍在不同使用场景下为串口设置别名的方法。主要分为绑定设备ID和绑定USB端口号。 1.绑定设备ID 绑定设备ID适用于USB转串口的设备ID唯一的情况&#xff0c…

线性代数本质系列(一)向量,线性组合,线性相关,矩阵

本系列文章将从下面不同角度解析线性代数的本质&#xff0c;本文是本系列第一篇 向量究竟是什么&#xff1f; 向量的线性组合&#xff0c;基与线性相关 矩阵与线性相关 矩阵乘法与线性变换 三维空间中的线性变换 行列式 逆矩阵&#xff0c;列空间&#xff0c;秩与零空间 克莱姆…

MySQL的SQL预编译及防SQL注入

文章目录 1 SQL语句的执行处理1.1 即时SQL1.2 预处理SQL1.2.1 预编译SQL的实现步骤1.2.2 预编译SQL的C使用举例1.2.3 MYSQL_BIND()函数中的参数类型&#xff1a; 2 SQL注入2.1 什么是SQL注入2.2 如何防止SQL注入 1 SQL语句的执行处理 SQL的执行可大致分为下面两种模式&#xf…

Linux环境实现mysql所在服务器定时同步数据文件到备份服务器(异地容灾备份场景)

目录 概述 1、建立ssh连接 1.1、操作mysql所在服务器 1.2、操作备份文件服务器 2、创建脚本实现备份以及传输 3、配置定时任务 概述 应对异地容灾备份场景&#xff0c;mysql所在服务器和本分服务器需要建立ssh连接&#xff0c;每天mysql服务器通过定时任务执行脚本&…

微信小程序授权登陆 getUserProfile

目录 前言 步骤&#xff1a; 示例代码: 获取用户信息的接口变化历史: 注意事项&#xff1a; 前言 在微信小程序中&#xff0c;你可以使用 getUserProfile 接口来获取用户的个人信息&#xff0c;并进行授权登录。以下是使用 getUserProfile 的步骤&#xff1a; 小程序发了…

ChatGPT 4 OpenAI 数据分析动态可视化案例

数据分析可视化是一种将原始数据转化为图形或图像的方法,使得数据更易理解和解读。这种方法能够帮助我们更清楚地看到数据中的模式、趋势和关联性,从而更好地理解数据,并据此做出决策。 数据分析可视化的一些常见形式包括: 1. 折线图:常用于展示数据随时间的变化趋势。 …

MATLAB | 官方举办的动图绘制大赛 | 第一周赛情回顾

嘿真的又是很久没见了&#xff0c;最近确实有点非常很特别小忙&#xff0c;今天带来一下MATHWORKS官方举办的迷你黑客大赛第三期(MATLAB Flipbook Mini Hack)的最新进展&#xff01;&#xff01;目前比赛已经刚好进行了一周&#xff0c;前两届都要求提交280个字符内的代码来生成…

一个关于jdbc操作mysql和java基础练手的通讯录管理系统小项目

首先 : 整个项目的项目结构为 : 1.第一步先导入数据库的驱动&#xff0c;我的mysql数据库是8.0以上版本&#xff0c;然后导入的驱动就是8.0.16版本的jar包&#xff1b; 1.JdbcBase : JDBC基础操作封装成了JdbcBase类,在里面先静态定义了数据库连接对象和DQL查询结果&#x…

C++阶段复习‘‘‘‘总结?【4w字。。。】

文章目录 前言类和对象C类定义和对象定义类成员函数C 类访问修饰符公有&#xff08;public&#xff09;成员私有&#xff08;private&#xff09;成员受保护&#xff08;protected&#xff09;成员 继承中的特点类的构造函数和析构函数 友元函数内联函数this指针指向类的指针类…

蓝桥杯 冒泡排序

冒泡排序的思想 冒泡排序的思想是每次将最大的一下一下移动到最右边&#xff0c;然后将最右边这个确定下来。 再来确定第二大的&#xff0c;再确定第三大的… 对于数组a[n]&#xff0c;具体来说&#xff0c;每次确定操作就是从左往右扫描&#xff0c;如果a[i]>a[i1],我们将…

Prim算法(C++)

目录 介绍&#xff1a; 代码&#xff1a; 结果&#xff1a; 介绍&#xff1a; Prim算法是一种用于解决最小生成树问题的贪心算法。该算法的主要思想是从一个顶点开始&#xff0c;不断向图中添加边&#xff0c;直到构成一棵包含所有顶点的生成树&#xff0c;使得树的边权之…

VSCode 好用的插件分享

文章目录 Introlistcode runner 【在文本编辑器中编辑好各类语言的源代码&#xff0c;然后一键运行】gitlens - 【git提交信息即时查看&#xff0c;类似IDEA中的 show annotation】还有更多&#xff0c;会日常补充。 Intro 大四毕业前&#xff0c;我只有一台dell latitude 455…

Vue 小黑记事本组件板

渲染功能&#xff1a; 1.提供数据&#xff1a; 提供在公共的父组件 App.vue 2.通过父传子&#xff0c;将数据传递给TodoMain 3.利用 v-for渲染 添加功能&#xff1a; 1.收集表单数据 v-model 2.监听事件&#xff08;回车点击都要添加&#xff09; 3.子传父&#xff0c;讲…

Vue3 + Three.js + gltf-pipeline大型园区场景渲染与3D业务

在非使用unity作为3D渲染方案的前提下&#xff0c;对与目前web开发者比较友好的除了canvas场景需要的2D babylon.js&#xff0c;fabric.js, Three.js是目前针对于jsWeb用户最直接且比较友好的3D引擎方案了。 准备工作&#xff1a; 1.明确需要用的场景方案都有那些&#xff0c;模…

创建maven的 java web项目

创建maven的 java web项目 创建出来的项目样子 再添加java和resources文件夹 一定要如图有文件夹下有图标才代表被IDEA识别&#xff0c;不让是不行的 没有的话在File——ProjectStructure中进行设置

EasyDarwin开源流媒体服务器

文章目录 前言一、EasyDarwin 简介二、EasyDarwin 主要功能特点三、安装部署四、推拉流测试1、进入控制页面2、推流测试3、拉流测试 前言 本文介绍一个十分实用的高性能开源 RTSP 流媒体服务器&#xff1a;EasyDarwin。 一、EasyDarwin 简介 EasyDarwin 是基于 go 语言研发&a…