微信小程序卡片横向滚动竖图

滚动并不是使用swiper,该方式使用的是scroll-view实现

Swiper局限性太多了,对竖图并不合适

从左往右滚动图片示例

wxml代码:

<view class="img-x" style="margin-top: 10px;"><view style="margin: 20rpx;font-family: auto;font-weight: bold;font-size: medium;">最新内容 ></view><scroll-view scroll-x ><view style="display: flex;flex-direction: row;"><block wx:for="{{background}}" wx:key="*this"><view wx:if="{{index!=0&&index!=(background.length-1)}}" style="margin-left: 10rpx;margin-right: 10rpx;"><image mode="aspectFill" class="img-x-v" src="{{item}}"></image></view><view wx:if="{{index==0}}" style="margin-right: 5rpx;"><image mode="aspectFill" class="img-x-v" src="{{item}}"></image></view><view wx:if="{{index==(background.length-1)}}" style="margin-left: 5rpx;"><image mode="aspectFill" class="img-x-v" src="{{item}}"></image></view></block></view></scroll-view></view>

 js代码:

Page({data: {background: ['图片地址1','图片地址2','图片地址3']}
})

 wxss代码:

.img-x{z-index: 100;
}
.img-x-v{width: 300rpx;border-radius: 18rpx;height: 550rpx;
}

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

三种生成树(STP,RSTP,MSTP)的基本配置(自我理解)

目录 一、为什么要使用生成树&#xff08;STP)&#xff1a; 二、由于设备冗余而导致的问题&#xff1a; 广播风暴&#xff1a; 三、802.1D生成树基本配置 四、802.1D生成树实验 实验拓扑&#xff1a; 实验配置&#xff1a; 配置完成后&#xff0c;在SW8上观察现象&…

RedisDesktopManager 连接redis

redis查看是否启动成功 ps -ef | grep redis以上未启动成功 cd /usr/local/bin/ 切换根目录 sudo -i 开启服务端 ./redis-server /usr/local/redis/redis.conf 开启客户端 ./redis-cli

JUC--阻塞队列

目录 问题引出 一.单端阻塞队列&#xff08;BlockingQueue&#xff09; 二.双端阻塞队列&#xff08;BlockingDeque&#xff09; 三.延迟队列&#xff08;DelayQueue&#xff09; 问题引出 由于实现消费者-生产者模型&#xff0c;每一次实现都比较麻烦&#xff0c;比如sych…

Python批量爬虫下载文件——把Excel中的超链接快速变成网址

本文的背景是&#xff1a;大学关系很好的老师问我能不能把Excel中1000个超链接网址对应的pdf文档下载下来。虽然可以手动一个一个点击下载&#xff0c;但是这样太费人力和时间了。我想起了之前的爬虫经验&#xff0c;给老师分析了一下可行性&#xff0c;就动手实践了。    没…

4.SpringCloud 基本架构

1.SpringCloud概述 Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具&#xff08;例如配置管理&#xff0c;服务发现&#xff0c;断路器&#xff0c;智能路由&#xff0c;微代理&#xff0c;控制总线&#xff0c;一次性令牌&#xff0c;全局锁&#xff0c;…

测试框架pytest教程(2)-用例依赖库-pytest-dependency

对于 pytest 的用例依赖管理&#xff0c;可以使用 pytest-dependency 插件。该插件提供了更多的依赖管理功能&#xff0c;使你能够更灵活地定义和控制测试用例之间的依赖关系。 Using pytest-dependency — pytest-dependency 0.5.1 documentation 安装 pytest-dependency 插…

【源码篇】ThreadLocal源码解析(主打的就是通俗易懂,言简意赅)

文章目录 ThreadLocal学习笔记前言1、TheadLocal基本介绍2、ThreadLocal基本使用3、体验ThreadLocal的优点3.1 ThreadLocal与synchronized的比较3.2、ThreadLoca的应用场景 4、ThreadLocal的内部原理4.1 ThreadLocal内部结构4.2 ThreadLocal常用方法分析4.2.1 set原理分析4.2.2…

云计算在IT领域的发展和应用

文章目录 云计算的发展历程云计算的核心概念云计算在IT领域的应用1. 基础设施即服务&#xff08;IaaS&#xff09;&#xff1a;2. 平台即服务&#xff08;PaaS&#xff09;&#xff1a;3. 软件即服务&#xff08;SaaS&#xff09;&#xff1a; 云计算的拓展应用结论 &#x1f3…

学习maven工具

文章目录 &#x1f412;个人主页&#x1f3c5;JavaEE系列专栏&#x1f4d6;前言&#xff1a;&#x1f3e8;maven工具产生的背景&#x1f993;maven简介&#x1fa80;pom.xml文件(project object Model 项目对象模型) &#x1fa82;maven工具安装步骤两个前提&#xff1a;下载 m…

合宙Air724UG LuatOS-Air LVGL API--简介

为何是 LVGL LVGL 是一个开源的图形库&#xff0c;它提供了创建嵌入式 GUI 所需的一切&#xff0c;具有易于使用的图形元素、漂亮的视觉效果和低内存占用的特点。 LVGL特点&#xff1a; 强大的 控件 &#xff1a;按钮、图表、列表、滑动条、图像等 高级图形引擎&#xff1a;动…

[Docker] Portainer + nginx + AList 打造Docker操作三板斧

Portainer : Docker容器图形化管理系统 nginx: 反向代理利器 AList: 文件管理系统 目的: 依托Portainer 的图形管理界面,可视化的配置docker容器. AList再关联Docker各容器内部的配置文件,可视化配置,再配合Portainer重启,日志查看,命令行操作等.对于中小企业对容器化操作简…

ECharts配合Node.js爬虫实现数据可视化

数据可视化简介 可视化技术是将数据和信息以图形化的方式展示出来&#xff0c;以便更好地理解和分析。可视化技术通常使用各种图表、图形、动画和交互式效果来呈现数据。可视化技术有以下几个基本概念&#xff1a; 数据&#xff1a;可视化技术的基础是数据。数据可以是数字、文…

探索软件项目管理的本质及概念

什么是软件项目管理&#xff1f; 软件项目管理是指对软件项目从规划、组织、指挥、控制到最终交付的全过程进行有效管理的一种方法。它通过合理的资源分配、有效的沟通和高效的协作&#xff0c;确保软件项目能够按照预定的目标、时间和质量要求完成。在现代信息技术逐渐普及和…

rabbitmq的发布确认

生产者将信道设置成 confirm 模式&#xff0c;一旦信道进入 confirm 模式&#xff0c; 所有在该信道上面发布的 消息都将会被指派一个唯一的 ID (从 1 开始)&#xff0c;一旦消息被投递到所有匹配的队列之后&#xff0c;broker 就会发送一个确认给生产者(包含消息的唯一 ID)&…

科技云报道:云计算下半场,公有云市场生变,私有云风景独好

科技云报道原创。 大数据、云计算、人工智能&#xff0c;组成了恢弘的万亿级科技市场。这三个领域&#xff0c;无论远观近观&#xff0c;都如此性感和魅力&#xff0c;让一代又一代创业者为之杀伐攻略。 然而高手过招往往一瞬之间便已胜负知晓&#xff0c;云计算市场的巨幕甫…

QTreeWidget——信号处理

文章目录 基本属性信号一、信号种类二、信号测试1、currentItemChanged、itemCollapsed、itemExpanded三个信号的测试2、itemActivated信号3、 itemChanged信号4、其余信号的测试代码&#xff08;包含以上代码&#xff09; 基本属性 信号 一、信号种类 //当前项发生变化时触…

sdk manager (ubuntu20.4) 安装

1、首先下载sdk manager 1.9.3 下载链接 https://www.baidu.com/link?urlVXJhUqxxhS3eFK3bOPTzi5LFl6ybeW3JwDY1CwANaPf1gvO3IxQKzY547NIe53x1blJxnAXg7FTRTvs-cnfnVa&wd&eqida22baa7b0004ca980000000664e2d426 当然要登录自己的账号才能成功下载&#xff0c;下载对应…

解决Spring mvc + JDK17@Resource无法使用的情况

问题描述 我在使用jdk17进行Spring mvc开发时发现 Resource用不了了。 原因 因为JDK版本升级的改动&#xff0c;在Jdk9~17环境下&#xff0c;搭建Springboot项目&#xff0c;会出现原有Resource&#xff08;javax.annotation.Resource&#xff09;不存在的问题&#xff0c;导…

安卓主板定制_电磁屏/电容屏安卓平板基于MTK联发科方案定制

定制化行业平板 在各行各业中的地位越来越重要&#xff0c;甚至在行业转型和发展中发挥着不可替代的作用。随着工业化社会的快速发展&#xff0c;工业生产对智控设备要求越来越高&#xff0c;运用的范畴也越来越普遍广泛&#xff0c;工业级平板就是其中一种应用广泛的设备。 新…

数据结构—树表的查找

7.3树表的查找 ​ 当表插入、删除操作频繁时&#xff0c;为维护表的有序表&#xff0c;需要移动表中很多记录。 ​ 改用动态查找表——几种特殊的树 ​ 表结构在查找过程中动态生成 ​ 对于给定值key ​ 若表中存在&#xff0c;则成功返回&#xff1b; ​ 否则&#xff0…