scroll-view中，image组件出现滚轴

最新推荐文章于 2025-03-14 15:23:36 发布
最新推荐文章于 2025-03-14 15:23:36 发布
阅读量2k 收藏 3
点赞数
分类专栏： 微信小程序 微信 image组件 文章标签： 微信 微信小程序 image
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_2842405070/article/details/69389253
版权
本文讨论了在微信小程序的scroll-view组件中，image组件出现横纵滚动轴的解决办法。通过设置image的display属性为block，配合调整width和height，可以消除滚动轴。同时建议在scroll-view中使用aspectFill的缩放模式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

上一篇文章讲到在普通的view中，使用image出现了横向的滚轴
（上一篇文章地址：http://blog.csdn.net/qq_2842405070/article/details/69382503）

这次讲到是在scroll-view中的image，暂时不写scroll-view了，我自己也对它了解甚少，有其他博主肯定写得比我这个新手好。
这次出现在我写的pixiv的小程序（依旧附上github地址：github-pixiv）中的问题是，图片出现了滚动轴，而且横轴纵轴都有。如图：

图片

和在《微信小程序 image组件的mode属性 以及 图片出现横向滚动轴》中图片出现滚动轴的原因一样，都是因为设置了固定的图片的大小，以至于图片真正的大小是这样的：

最低0.47元/天 解锁文章
【微信小程序】基础组件-scroll-view滚动视图容器
墨夶的博客
11-21 3151
组件是微信小程序中非常重要的布局组件，支持多种滚动行为和样式控制。通过合理使用组件及其属性和事件，可以构建出流畅且功能丰富的滚动视图。希望本文对你的微信小程序开发有所帮助。😊。
计算机编程 英语词汇
ZJQ的博客
01-03 1013
radius ：半径 Slate：石板，写字板 Canvas：画布 Airbrush：气笔，喷枪 fountain： found：建立，从下向上： 喷泉。 压力值：Pressure value BrushesPlotter： 刷子， 绘图仪 画板。 Stroke:(打、击等的)一下 Strokes:笔画 platform---平台 version---版本 proje...
html+css使图片在页面中循环滚动
aiguan9054的博客
06-21 3706
我们先通过html创建一个div盒子的框架，方便后续以及实际使用中调整位置。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>滚动播放</title>...
微信小程序——scroll-view组件之scroll-x、scroll-y
最新发布
yongyuandeziji的博客
03-14 574
微信小程序——scroll-view组件之scroll-x、scroll-y，特别注意scroll-x的使用，需要增加display: inline-block和white-space:nowrap样式，当然scroll-view宽度也需要固定的哦！
（六）scroll-view 组件
Luckyzhoufangbing的博客
08-11 906
（一）横向滚动、纵向滚动 scroll-x scroll-y <view> <view class="box"> <!-- 纵向滚动 --> <scroll-view class="wrapper" scroll-y> <view id="1" class="view demo-1">A</view> <view id="2" class="view demo-2">B&l.
可滚动视图scroll-view组件
qq2844509367的博客
08-14 1079
微信小程序是组件进行拼装的项目scroll-view组件是视频展示和图片展示的很好容器。
微信小程序scroll-view组件
2301_76669854的博客
04-16 2018
当一个容器内容很多时，若容器无法显示完整内容，则可通过滚动操作查看所有内容 在微信小程序中scroll-view组件可以实现滚动效果
JAVA专用术语中英文对照
liuqzan的博客
06-20 704
一群性质相近同的「东西」，如果译名一贯，阅读的感觉就很好。 一贯性的术语，扩充性高，延伸性高，系统化高。 ● 我喜欢「式」： constructor 建构式 declaration 宣告式 definition 定义式 destructor 解构式 expression 算式（运算式） function 函式 pattern 范式、模式、样式 program 程式 signature 标记式 ● ...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
u012421719的博客
10-24 1万+
本文长期更新
侯捷老师整理||IT专业术语中英对照表
qq_37097507的博客
06-23 1911
侯捷老师整理||IT专业术语中英对照表 百度文库的原文，侯捷老师整理的中英单词，真的对我们学习很有帮助 由于老师的网站已经失效了，所以就是从网上搜索来的，没有注明转载。 一群性质相近同的「东西」，如果译名一贯，阅读的感觉就很好。 一贯性的术语，扩充性高，延伸性高，系统化高。 ————by侯捷 一群性质相近同的「东西」，如果译名一贯，阅读的感觉就很好。 一贯性的术语，扩充性高，延伸性高，系统化高。 ● 我喜欢「式」： constructor 建构式 declarat
scroll-view组件和swiper组件
weixin_51593721的博客
05-06 576
swiper-item 标签>里，可以定义轮播图片的相关信息，比如此处定义class为slide-image，资源路径为/asserts里。在制定横向/纵向滚动时，要在对应wxss里加上限定高/宽【限定纵向（加高度），横向（加宽度）】实现小程序轮播图的组件，其中waiper为容器，swiper为具体轮播的内容，一般是图片，以src的形式调用。在wxml里定义一个滚动容器，标签为scroll-y表示允许纵向滚动。.swiper定义轮播图高度，元素的外边距。对应wxss里定义容器的高度，宽度，边框颜色。
六、ScrollView组件
SpringWaterLikeMe
11-06 249
ScrollView组件 ScrollView 必须有一个确定的高度才能正常工作 一般来说我们会给 ScrollView 设置flex: 1以使其自动填充父容器的空余空间，但前提条件是所有的父容器本身也设置了 flex 或者指定了高度，否则就会导致无法正常滚动，你可以使用元素查看器来查找具体哪一层高度不正确。 长列表尽量用FlatList，效率会比较高。 综合实例 import React from 'react'; import {StyleSheet, Text, View, ScrollView, S
UWP 开发初阶 Chapter 13 - ScrollViewer 与 Image 两个 XAML 控件的使用与介绍
weixin_34109408的博客
07-25 274
上篇回顾 先前三篇连续讲了数据绑定，这些显然并不是数据绑定的全部技巧与内容，比如还有转换器（Converter）等等的知识点没有提及。目前打算在中阶的课程里面再补充一些。 本篇正文 这一次我们来讲一下 XAML 控件中另外两个常用控件。分别是 ScrollViewer 和 Image。 ScrollViewer 就是滚轮可滑动的区域，毕竟实际开发中，很多内容不可能一页就能显示完全的。需要我们来...
微信小程序开发（七） scroll-view 组件
竹毛言己
04-11 2052
微信小程序scroll-view组件
【微信小程序】组件（一）srcoll-view
不想做菜鸟的小螃蟹
10-03 1671
今天记录一下scroll-view学习中遇到的问题及解决办法，希望能对其他同学有所帮助。 首先展示一下想达到的效果。↓ vertical scroll实现上下滚动，horizontal实现左右滚动。 先附上wxml的代码。 view class="container"> view> text>vertical scrolltext> scroll-view
09.scroll-view
天蝎
03-26 527
scroll-view 组件具有提供滚动方式的容器，组件所支持的属性如下： 接下来一个个属性来测试，先创建一个scroll-view <scroll-view class='scroll-view'> <view class='view-item' style='background: green;'>1</view> <view...
微信小程序 image组件的mode属性 以及 图片出现横向滚动轴
热门推荐
电鳗的博客
04-06 8万+
微信小程序中，对于image组件在规定了宽度的view组件中，使用mode属性，展示出的图片下面出现滚动轴。这篇文章就是解释为什么会出现这个问题以及解决方案。
UGUI之Scroll view
alayeshi的专栏
07-17 350
Scroll view是一个方便制作滑动的组件。游戏里背包等经常用到的。效果如下： 之前说过自己来制作滑动器的方法：https://blog.csdn.net/alayeshi/article/details/50240075 下面讲的是一个更为简单的方法：使用Scroll View组件。方法如下： 1.首先新建Scroll View，然后在它下面会找到Content。 2.将要被展示的内容放到它的下面，作为其子物体。如图： 3.在Content上添加组件Grid layout group
【微信小程序】组件篇 -- 常用视图容器类组件介绍 -- view、scroll-view和swiper（六）
JMFive的博客
02-23 7141
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第6篇文章;今天开始学习微信小程序的第三天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉。
小程序scroll-view上拉加载与下拉刷新组件解决方案
1. 微信小程序中的scroll-view组件基础：scroll-view是微信小程序提供的一个可以滚动的视图容器，用于制作可滚动的页面内容区域。它支持垂直滚动和水平滚动，是实现页面内可滚动内容区域的关键组件。 2. 小程序页面...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值