微信小程序-swiper-item下的列表高度问题解决

news/2024/7/20 1:34:14 标签: 小程序

需求是实现头部的选项卡切换页面,手指左右滑动也可以实现切换页面,于是使用swiper实现功能,但是有一个页面涉及到了列表,代码写完之后发现swiper下的列表无法撑起swiper的高度,经过百度知道swiper的高度是固定的150px,因为swiper组件的元素swiper-item是设置了绝对定位的,所以里面的内容是无法撑开swiper的,解决办法:

1.在swiper-item里的内容加scaoll-view包装;

代码提示

wxml部分
<swiper class="swiper" current="{{currentData}}" bindchange="bindchange" indicator-dots="true" indicator-color="#2CC669" >
  <swiper-item> 
    <scroll-view scroll-y="true" class="scroll">
   <view>你的列表</view>
  </scroll-view>
  </swiper-item>
  <swiper-item>
    <view>你好呀</view>
  </swiper-item>
</swiper>
wxss部分
.topTabSwiper {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  zoom: 1;
  height: 50px;

}
.swiper {
  width: 100%;
  height: calc(100vh - 50px);
}
.scroll{
  height: 100%;
}

这样就可以解决问题了啦~ 特此记录一下。


http://www.niftyadmin.cn/n/1728134.html

相关文章

微信小程序 扫码跳转

初次调用微信小程序的扫码&#xff0c;记录一下。其实也很简单直接调用微信官方提供的api就能实现 wx.scanCode&#xff08;&#xff09; // 允许从相机和相册扫码 wx.scanCode({success (res) {console.log(res)} })// 只允许从相机扫码 wx.scanCode({onlyFromCamera: true,s…

Flink--window数据倾斜

1.window数据倾斜 对于集群系统&#xff0c;一般缓存是分布式的&#xff0c;即不同节点负责一定范围的缓存数据。我们把缓存数据分散度不够&#xff0c;导致大量的缓存数据集中到了一台或几台服务节点上&#xff0c;称为数据倾斜。一般来说&#xff0c;数据倾斜是由于负载均衡…

微信小程序px与rpx之间的相互转换

首先我们需要知道&#xff0c;小程序官方为了适配各类手机屏幕&#xff0c;推荐使用rpx单位进行绘图&#xff0c;而且在所有的机型上面&#xff0c;屏幕的宽度都是固定的750rpx&#xff0c;所以我们可以利用这个条件进行rpx-px之间的单位转换。 获取系统屏幕的宽度的方法&#…

kill -9都杀不掉的进程怎么搞

怎样杀掉kill -9都杀不掉的进程 Linux系统下经常需要用到杀进程的命令&#xff0c;但有时候kill -9 执行完之后&#xff0c;发现进程号还在&#xff0c;这时候需要如何解决。 &#xff08;1&#xff09;kill -9 命令 kill -9 发送SIGKILL信号给进程&#xff0c;将其终止&…

kafka自动清理日志

Kafka日志的清除 Kafka将消息存储在磁盘里&#xff0c;随着程序的运行&#xff0c;Kafka会产生大量的消息日志&#xff0c;进而占据大部分磁盘空间&#xff0c;当磁盘空间满时还会导致Kafka自动宕机&#xff0c;因此Kafka的日志删除是非常有必要的。 1. Kafka的日志清除策略 …

微信小程序实现日期格式化

1、获取时间戳格式的系统日期 //获取系统时间var nowtime new Date().getTime()console.log(现在的时间是nowtime)输出&#xff1a; 现在的时间是16153600400982、将时间戳格式的日期转换成yyyy-MM-dd HH:MM:SS /*** * param {*} times 时间戳* 转换为 yyyy-MM-dd HH:MM:SS…

小程序实现活动倒计时显示(精确到时分秒)

直接上代码&#xff1a; wxml: <text>{{day}}天{{hour}}时{{minute}}分{{second}}秒</text>js onLoad: function (options) {var that this;that.countDown(2021-03-22 10:00:00)},/*** 倒计时* * param endTime 结束日期时间* **/countDown: function (endTime…

微信小程序引入Vant Weapp组件库

第一步&#xff1a; 在项目的根目录打开终端窗口或者在微信的开发者工具里直接新建一个终端。 我是直接在开发者工具里新建了一个终端&#xff0c;效果是一样的。如图&#xff1a; 新建终端之后&#xff0c;直接输入 npm init 按下回车会让你输入packagename&#xff0c;输入…