微信小程序中view和scroll-view的用法

最新推荐文章于 2024-05-08 15:10:01 发布
最新推荐文章于 2024-05-08 15:10:01 发布
阅读量474 收藏
点赞数 2
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhao123456asd/article/details/124050114
版权
本文介绍了如何在微信小程序中实现竖向和横向滚动视图。通过在list.wxml和list.wxss文件中设置scroll-x和scroll-y属性，可以轻松创建滚动效果。对于横向滚动，需在wxss中设定宽度；而竖向滚动则需设定高度。
摘要由CSDN通过智能技术生成

功能：通过view和scroll-view实现，竖向滚动。

1.在list.wxml中

2.在list.wxss中

显示效果:

如果要显示横向滚动，必须要设置为scroll-x 必须要在list.wxss中写宽度。

如果要显示竖向滚动，必须设置为scroll-y必须要遭list.wxss中写高度。

天涯潇洒
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序 点击切换样式scroll-view实现代码实例
10-16
在微信小程序中，`scroll-view`组件是一种常用于实现页面滚动功能的组件，它可以水平或垂直滚动内容。本文将详细讲解如何通过点击事件切换`scroll-view`中的样式，并提供一个具体的代码实例。 首先，我们需要了解`...
七、微信小程序-快速回顾 ( swiper 轮播图、scroll-view 可滚动视图区域 )
Ares5k
05-07 3680
微信小程序、swiper 轮播图、scroll-view 可滚动视图区域
小程序scroll-view 组件的使用
weixin_47938715的博客
03-19 2798
小程序scroll-view 组件的使用
小程序scroll-view 点击函数 滚动到指定元素
最新发布
qq_44759522的博客
05-08 305
【代码】小程序scroll-view 点击函数 滚动到指定元素。
微信小程序开发（七） scroll-view 组件
竹毛言己
04-11 1912
微信小程序scroll-view组件
微信小程序 scroll-view
weixin_59727199的博客
09-15 7790
微信小程序 scroll-view
微信小程序开发系列（十二）·屏幕滚动scroll-view 组件的使用
时光の尘的博客
03-02 1万+
网页中的滚动条效果，用户可以通过手指滑动或者点击滚动条来滚动内容。scroll-view:可滚动视图区域,适用于需要滚动展示内容的场景,用于在小程序中实现类似于。在微信想小程序中如果想实现内容滚动，需要使用 scroll-view 组件。① scroll-x： 允许横向滚动。② scroll-y： 允许纵向滚动。框住部分能够上下滚动。
微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image
m0_63622279的博客
07-11 7839
scroll-view组件就是滚动的视窗，使用scroll-view组件时，要想横向滚动或者纵向滚动时，需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是，纵向滚动需要给scroll-view组件限定高度，横向滚动则需要给scroll-view组件添加一个限定的宽度。swiper 和 swiper-item组件是微信小程序提供的用于快速构建轮播图的组件，swiper为轮播图的容器，swiper-item为轮播图的每一项。官网地址【swiper组件】
解决微信小程序scroll-view换行问题
01-03
今天在写小程序的时候使用了scroll-view,但是发现在scroll-view中一行文字不能换行，代码如下： <scroll xss=removed> asdhadjhkajshdkjahsdkjasdajsdhkajsdkajsdkajsdhasjdaksj </scroll> 发现scroll-view内的一大...
微信小程序scroll-view组件实现滚动动画
08-28
微信小程序 scroll-view 组件是一种常用的滚动容器组件，通过设置 scroll-into-view 和 scroll-with-animation 属性可以实现滚动动画效果。在本文中，我们将详细介绍如何使用 scroll-view 组件实现滚动动画，并提供...
微信小程序中scroll-view中不设定高度实现自动滚动
09-17
在微信小程序开发过程中，经常会遇到需要使用`scroll-view`组件来展示可滚动内容的需求。通常情况下，为了使`scroll-view`能够正常工作，我们需要为其指定一个固定的高度值。然而，在某些场景下（例如内容长度不确定...
微信小程序 scroll-view的使用案例代码详解
10-15
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，它提供了一个可滚动的视图容器，能够处理复杂的滚动需求，包括横向和纵向滚动。本文将深入探讨 `scroll-view` 的使用方法，并通过具体的代码案例进行解析...
微信小程序 scroll-view组件的基本使用
贼厉害
02-04 3789
我们可以看到他占满了整个大盒子肯定不行，我们得给他一个宽和高， 宽给他和方块一样大小的100px，高我们给他一个220px，为什么是220px 因为每个方块是100px 高加起来就是300px，为了让他能实现滑动效果，肯定不能给他等于大于他的现有高，应该小于都行对吧。其实我们还有2个参数没有给他们，此时大家可以想的到既然有纵向滑动自然有横向滑动对吧，其实原理是一样的，这两个参数就是。此时我们的方块因为上节课修改了布局变成了横向布局，我们需要修改回来纵向布局，所以我们需要删除我们上一节课的布局代码。
微信小程序使用scroll-view标签 实现列表分页功能
一个超爱喝可乐的web前端攻城狮
04-26 3466
微信小程序使用scroll-view标签 实现列表分页功能 1,wxml //此处定义滚动的主要高度 //方向(向下-y) //触底函数 <scroll-view style="height:780rpx" scroll-y="true" bindscrolltolower="paging"> //列表循环 //定义唯一索引 <view class="list" wx:for="{{list}}" wx:key="index">
【微信小程序】组件篇 -- 常用视图容器类组件介绍 -- view、scroll-view和swiper（六）
JMFive的博客
02-23 5444
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第6篇文章;今天开始学习微信小程序的第三天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉。
小程序之scroll-view组件
热门推荐
soos的博客
01-20 1万+
scroll-view 可滚动视图区域。有时候我们的一些视图在手机指定的宽度和高度不够存放，那么可以放在 scroll-view 中，以滚动的形式显示被隐藏的内容。 滚动视图分为横向滚动和纵向滚动两种方式，下面我们对视图的滚动进行一一说明。 横向滚动 设置横向滚动（必须满足以下三点）： 1.给scroll-view添加scroll-x="{{true}}"属性（设置为允许横向滚动） 2.给scroll-view添加white-space:nowrap;属性（设置为不换行） 3.给scroll-v
微信小程序：ListView的实现及item的添加和删除
kang0226的博客
04-28 6341
微信小程序：ListView的实现及item的添加和删除 效果图 具体实现 首先在pages文件夹下面添加my-list页面及其相应文件： 打开app.json，注册my-list界面，并将其放到第一位（打开小程序时显示的页面） 完成item的ui设计，按照喜好设计，这里只贴了my-list.wxml的代码（仅有两个text和一个image）： 在my-list.js的data里添加...
微信小程序使用scroll-view实现视图滚动
improvement
11-16 1685
微信小程序使用scroll-view实现视图滚动 1、设置横向滚动 给scroll-view添加scroll-x="true"属性。 给scroll-view添加white-space:nowrap;样式。 给scroll-view中的子元素设置为display:inline-block;。 示例代码如下： wxml代码： <scroll-view class='scroll-x-view' scroll-x='true'> <view class='scroll-view-ite
微信小程序scroll-view的使用示例，实现滚动
qq_46099629的博客
09-27 448
【代码】微信小程序scroll-view的使用示例，实现滚动。
微信小程序scroll-view scroll-into-view
10-13
微信小程序中的 scroll-view 组件可以实现滚动视图的效果，而 scroll-into-view 属性可以让指定的某个子组件滚动到视图中。当 scroll-into-view 的值为某个子组件的 id 时，该子组件就会滚动到 scroll-view 的顶部或底部，具体取决于该子组件在 scroll-view 中的位置。 例如，以下代码可以让 id 为 "item-5" 的子组件滚动到 scroll-view 的顶部： ``` <scroll-view scroll-into-view="item-5"> <view id="item-1">...</view> <view id="item-2">...</view> <view id="item-3">...</view> <view id="item-4">...</view> <view id="item-5">...</view> <view id="item-6">...</view> <view id="item-7">...</view> </scroll-view> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值