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

news2024/11/19 1:55:36

滚动并不是使用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.coloradmin.cn/o/898633.html

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

相关文章

XOR Subsequence 2023“钉耙编程”中国大学生算法设计超级联赛(10)hdu7390

Problem - 7390 题目大意&#xff1a;有一个n个数的数组a&#xff0c;对他们的所有非空子序列求异或和得到长度为的数组b&#xff0c;给出b&#xff0c;求a 1<n<18 思路&#xff1a;可以发现&#xff0c;a数组其实是b数组的线性基 &#xff08;线性基详解_Hypoc_的博客…

el-tabs的上方目录栏增加自定义按钮

需求如图&#xff1a;需要在el-tabs的最右侧加一个自定义按钮&#xff0c;它不属于el-tab-pane&#xff0c;而且要在最右侧。这时候就要使用定位来完成这个按钮的显示。 代码结构如下&#xff1a;自定义按钮要与el-tabs的层级并列&#xff0c;然后通过css设置custom-btn的定位…

15、分布式锁简介

一 分布式锁简介 分布式锁&#xff1a;满足分布式系统或集群模式下多进程可见并且互斥的锁。 分布式锁的核心思想就是让大家都使用同一把锁&#xff0c;只要大家使用的是同一把锁&#xff0c;那么我们就能锁住线程&#xff0c;不让线程进行&#xff0c;让程序串行执行&#xf…

2023.8-java-基本语法

基本语法 编写 Java 程序时&#xff0c;应注意以下几点&#xff1a; 大小写敏感&#xff1a;Java 是大小写敏感的&#xff0c;这就意味着标识符 Hello 与 hello 是不同的。类名&#xff1a;对于所有的类来说&#xff0c;类名的首字母应该大写。如果类名由若干单词组成&#x…

nginx(七十七)nginx与包体的探究

一 nginx与body体 说明&#xff1a;本文不具有生产意义,只是为了nginx知识的闭环,可以跳过即可 --> "数据脱敏"题外话&#xff1a; 对body的CURD,nginx和openresty处理方式不同强调&#xff1a; 本文是基于http演示的,如果是https加密我们是看不到的 ① core模…

博客系统之功能测试

博客系统共有&#xff1a;用户登录功能、发布博客功能、查看文章详情功能、查看文章列表功能、删除文章功能、退出功能 1.登录功能&#xff1a; 1.1测试对象&#xff1a;用户登录 1.2测试用例 方法&#xff1a;判定表 用例 编号 操作步骤预期结果实际结果截图1 1.用户名正确…

安全学习DAY18_信息打点-APP资产搜集

信息打点-APP资产&静态提取&动态抓包&动态调试 文章目录 信息打点-APP资产&静态提取&动态抓包&动态调试本节知识&思维导图本节使用到的链接&工具 如何获取目标APP从名称中获取APP从URL获取APP APP搜集资产信息APP提取信息分类信息提取方式信息…

常用的电参数

电参数根据电流的特点可以分为直流电参数和交流电参数&#xff0c;在电参数中有些是可以通过电参数表测得&#xff0c;有些参数则为通过测得的参数计算而来。 一、电参数 1.1 直接可测电参数 ——瞬时电压值 ——瞬时电流值 n——采样点数 f——频率 time——时间 其中&…

使用IText导出复杂pdf

1、问题描述 需要将发票导出成pdf&#xff0c;要求每页都必须包含发票信息和表头行。 2、解决方法 使用IText工具实现PDF导出 IText8文档&#xff1a;Examples (itextpdf.com) 3、我的代码 引入Itext依赖&#xff0c;我这里用的是8.0.1版本 <dependency><groupId>…

基于阿里云 Flink+Hologres 搭建实时数仓

摘要&#xff1a;本文作者阿里云 Hologres 高级研发工程师张高迪&阿里云 Flink 技术内容工程师张英男&#xff0c;本篇内容将为您介绍如何通过实时计算 Flink 版和实时数仓 Hologres 搭建实时数仓。 Tips&#xff1a;点击「阅读原文」免费领取 5000CU*小时 Flink 云资源 背…

Linux Debian12命令终端安装pip install rsa报错error: externally-managed-environment

Linux Debian12在命令终端安装pip install rsa出现error: externally-managed-environment错误,如下图&#xff1a; 仔细读了一下报错内容才搞懂&#xff0c;原来是Debian12安装Python包时需要使用apt install python3-包名&#xff0c;例如安装rsa&#xff0c;使用sudo apt …

太阳能的发展与应用

目录 1.太阳能的概念 2.太阳能的原理 3.太阳能的发展过程 4.太阳能的普及对人类的作用 1.太阳能的概念 太阳能是指利用太阳辐射能的能源。太阳能可以分为两种利用方式&#xff1a;热能和光能。 太阳能热能是指将太阳辐射的热能直接转化为热能供人们使用。这种利用方式包括太…

导出Excel一些格式、样式的 代码

1.合并单元格 // 合并单元格&#xff08;开始行, 结束行, 开始列, 结束列&#xff09;CellRangeAddress regionRow0 new CellRangeAddress(0, 0, 0, 10);sheet.addMergedRegion(regionRow0);2.单元格根据汉字自动匹配颜色 HSSFConditionalFormattingRule orange scf.createCo…

SE24维护类、接口interface(如何看懂CO03事务码对应的abap代码)

我想读懂CO03这个事务码的代码。 也不是全都读懂&#xff0c;只要读懂其中一小部分就可以了。如下图&#xff1a; 记入文档的货物移动。 现在已经大概知道了这种SAP系统自带事务码的代码结构&#xff0c;因为我想看懂的部分&#xff0c;毕竟是其中最简单的部分-----ALV&#…

大疆mini 3 Pro 手工拍摄倾斜摄影照片, 利用WebODM 制作老房子的模型

最近比较着迷于无人机&#xff0c; 因此也研究了一些无人机图片的处理技术&#xff0c; 对于航空倾斜摄影的图片处理&#xff0c; 发现WebODM 这个开源软件确实不错&#xff0c; 利用手里的大疆mini 3 pro&#xff0c; 手动拍摄了一些关于家里的老房子的照片&#xff0c; 最后果…

MFC140.dll缺失的修复方法,安装MFC140.dll文件

大家好&#xff0c;今天我要和大家分享的是如何正确安装和使用MFC140.dll。MFC140.dll是一种常见的动态链接库文件&#xff0c;它是Microsoft Foundation Classes(MFC)的一部分&#xff0c;被广泛应用于Windows操作系统中的各种应用程序中。在本文中&#xff0c;我们将详细介绍…

什么是高度塌陷?

目录 高度塌陷 解决高度塌陷的方法 由于前面将高度塌陷和外边距重叠搞混&#xff0c;现在重新写一下高度塌陷 高度塌陷 在文档流中&#xff0c;父元素的高度默认是被子元素撑开的&#xff0c;也就是子元素多高&#xff0c;父元素就多高。但是当为子元素设置浮动以后&#xff…

win10的pycharm开发工具使用Jupyter的各种报错:环境问题

一、问题 在win10系统的pycharm开发工具使用Jupyter的各种报错&#xff0c;却一直解决不了。 我一度使用过购买云服务器、重装系统等等各种办法&#xff0c;都没能解决。 例如&#xff1a;在speech_processing.ipynb文件中 import librosa y, sr librosa.load(C:/Test/000…

基于Forcite模块的分子动力学研究药剂与矿物相互作用实例(一)

关键词&#xff1a;相互作用 MS Forcite 分子动力学 径向分布 笔名&#xff1a;杨过 Forcite模块是分子动力学计算的主要模块&#xff0c;研究范围广&#xff0c;可以对多种周期性体系进行计算分析&#xff0c;在矿物分选领域中主要是计算分析药剂与矿物相互作用&#xff0…

ROS2中的roscd命令

一、问题 最近在学习ROS2&#xff0c;环境搭建好后想查看下某个包的内容&#xff0c;在ROS里面习惯用roscd直接进入&#xff0c;但在ROS2里面没有这个命令 二、解决办法 目前网上的相关资料比较少&#xff0c;博客1中提到ROS2中需要使用colcon_cd来替代roscd&#xff0c;不过…