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

news/2024/6/18 21:13:04 标签: 微信小程序, notepad++, 小程序

滚动并不是使用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.niftyadmin.cn/n/4952951.html

相关文章

redis总复习

springboot基于redisson实现看门狗锁:Springboot基于Redisson实现Redis分布式可重入锁【案例到源码分析】_springboot redission lock_AP0906424的博客-CSDN博客 springboot基于redis实现设置缓存和过期时间的代码&#xff1f;包括key的设计 https://mbd.baidu.com/ug_share…

【力扣】503. 下一个更大元素 II <单调栈>

【力扣】503. 下一个更大元素 II 给定一个循环数组 nums &#xff08; nums[nums.length - 1] 的下一个元素是 nums[0] &#xff09;&#xff0c;返回 nums 中每个元素的 下一个更大元素 。数字 x 的 下一个更大的元素 是按数组遍历顺序&#xff0c;这个数字之后的第一个比它更…

plt绘制箱型图+散点图

import numpy as np import matplotlib.pyplot as plt# 创建示例数据 np.random.seed(1) data [np.random.normal(0, std, 100) for std in range(1, 4)]# 绘制箱型图 plt.boxplot(data, patch_artistTrue,zorder0)# 添加数据点的散点图&#xff0c;并设置参数以避免重叠 for …

CMC、mAP解析:图像检索领域评价指标

1. CMC&#xff1a; Cumulative Matching Characteristics 累计匹配特征 CMC是一种计算 top-n 的评价指标&#xff0c;主要用来评估闭集中rank-n的正确率。 下面举例说明&#xff1a; 在双模态特征匹配中。底库 Gallery 中有10条数据&#xff08;label分别为1&#xff0c;2&am…

年薪100w的项目组合和项目集经理与项目经理的区别

项目经理未来的发展是什么&#xff1f;很多人经常问&#xff0c;专业的路可以是项目集&#xff0c;项目组合经理&#xff0c;也可以是PMO等等。为什么项目集经理&#xff0c;项目组合经理就挣得比较多呢&#xff1f;今天为大家一一揭秘&#xff01; 项目经理、项目集经理和项目…

python 编程规范有哪些?

Python 编程规范主要包括代码布局、命名规范、注释规范、函数编写规范等多个方面&#xff0c;下面给出一些常见的编程规范及其示例代码。 1. 代码布局规范 代码布局规范主要是指代码的缩进、行宽、空行、换行等方面&#xff0c;下面是一些常见的代码布局规范&#xff1a; 使…

BC99 序列中整数去重

描述 输入n个整数的序列&#xff0c;要求对这个序列进行去重操作。所谓去重&#xff0c;是指对这个序列中每个重复出现的整数&#xff0c;只保留该数第一次出现的位置&#xff0c;删除其余位置。 输入描述 输入包含两行&#xff0c;第一行包含一个正整数n&#xff08;1 ≤ n…

《合成孔径雷达成像算法与实现》Figure3.10

代码复现如下&#xff1a; clc clear close all% 参数设置 TBP 100; % 时间带宽积 T 7.2e-6; % 脉冲持续时间 t_0 1e-6; % 脉冲回波时延% 参数计算 B TBP/T; …