微信小程序scroll-view滚动到指定位置

2023-11-18

自动滚动到指定位置

在小程序开发过程中,为了满足一个特殊的要求,因此需要一个特殊的功能。即在打开小程序数据加载完成的时候,需要页面自动滚动到指定位置,或者页面的底部,在各种度度、狗狗之后,通过各种尝试,算是找到了一个比较完美的方案:

微信扫描下面小程序体验(里面每天自动更新微软的精美壁纸):
在这里插入图片描述

就是下面这个组件scroll-view

在这里插入图片描述

主要使用里面一个属性: scroll-into-view

1.wxml代码:

<scroll-view style="width:100%;height:{{windowHeight}}px" scroll-y="true" scroll-into-view="{{bottomId}}"
	scroll-with-animation="true">

	<view class="view_main">
		<view class="view_items" wx:for="{{imgDatas}}" wx:key="item">
			.....
		</view>
	</view>
	
	<view  id="bottomView" class="view_More" bindtap="onClickMore"></view>
</scroll-view>

注意里面的 scroll-into-view="{{bottomId}}"id=“bottomView” 属性。

2.js代码:

  /**
   * 页面的初始数据
   */
  data: {
    bottomId: null,
  },

	........

   /**
   * 滚动到指定位置
   */
  scrollBottom: function () {
    	var that = this;
        that.setData({
          bottomId: 'bottomView',
        })
  }

以上是实现纵向自动滚动的功能。按理说,应该还有横向自动滚动的功能,有时间也尝试一下,再更新博客。

另外,scroll-view 中的enable-back-to-top方法可以实现自动滚动到头部的功能,有感兴趣的同学可以简单创建一个尝试一下哦!!

通过以上操作即可实现需要的滚动功能!!(有问题留言回复)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序scroll-view滚动到指定位置 的相关文章

  • 如何创建自己的小程序?零编程一键创建实战指南

    当今瞬息万变的数字世界中 拥有一个属于自己的小程序已成为企业与个人展示 服务和互动的重要途径 无需编码知识 通过便捷的云端可视化平台 也可以轻松创建一款符合自身需求且功能丰富的小程序 下面给大家分享如何创建自己的小程序 1 选择一个易用的小
  • 【计算机毕业设计】趵突泉景区的智慧导游小程序_5ztvv

    当今社会已经步入了科学技术进步和经济社会快速发展的新时期 国际信息和学术交流也不断加强 计算机技术对经济社会发展和人民生活改善的影响也日益突出 人类的生存和思考方式也产生了变化 传统趵突泉景区的智慧导游采取了人工的管理方法 但这种管理方法存
  • 【计算机毕业设计】北京医疗企业固定资产管理系统的设计与实现 _4c4c1

    近年来 人们的生活方式以网络为主题不断进化 北京医疗企业固定资产管理就是其中的一部分 现在 无论是大型的还是小型的网站 都随处可见 不知不觉中已经成为我们生活中不可或缺的存在 随着社会的发展 除了对系统的需求外 我们还要促进经济发展 提高工
  • ScrollView 在 swift 3 中添加子视图

    我想尝试在滚动视图上添加视图表单 但视图未完全添加到滚动视图的框架上 我的代码是 import UIKit class AddIncomeVC UIViewController IBOutlet var scrollView UIScrol
  • Android 在可扩展列表视图中禁用自动滚动

    我在可扩展列表视图中使用 当我打开列表视图中的某个项目时 我的滚动会自动聚焦在打开的项目上 我可以阻止列表聚焦在新项目上并停留在同一个地方吗 我尝试从打开的视图中删除可聚焦的内容 但它不起作用 您需要重写 OnGroupClickListe
  • 操纵事件和平移模式

    我正在开发一个用于触摸设备的 WPF 我面临一个奇怪的问题 我的 XAML 结构是
  • 如何将ScrollView滚动到文本中的特定位置[重复]

    这个问题在这里已经有答案了 我有一个 ScrollView 里面有一个 TextView 我想将它滚动到某个段落 就像 HTML 中的锚点一样 例如 page html paragraph id 有人知道怎么做吗 Thanks 尝试使用sc
  • 如何在本机反应中同步两个滚动视图?

    我的要求是创建一个具有固定标题和第一列的表格 表格数据将在水平和垂直方向上滚动 for this I have used 3 scrollviews following gif will make it clear 第一个滚动视图是标题名称
  • 当listview滚动时edittext设置默认值

    我有带有 edittext 的列表视图和 按钮 当我单击按钮时更改编辑文本值 例如递增 递减 当我设置值时5并滚动列表视图 将 edittext 设置值作为默认值如 0 我正在使用这种方式 public View getView final
  • 如何在另一个滚动视图中滚动ListView

    我有个问题 我有一个布局 其滚动视图位于三个列表视图 A B C 上 我想要滚动孔布局以及滚动每个列表视图 Problem 当布局滚动时 列表视图不会滚动 如果我删除滚动布局 则列表会滚动 但布局不会滚动 可能的解决方案是什么 使用以下方法
  • 如何显示大于手机屏幕尺寸的图像?

    我有一个问题 但我没有找到真正一致的答案 这就是为什么我向你们伸出援手 我一直在尝试从以下意义上为我的应用程序实现 取景器 效果 我有一张巨大的图片 我希望能够 飞 过 水平和垂直滚动 直到到达边界 到目前为止 对此 或类似问题 的所有流行
  • 以编程方式在(线性)布局(即 ScrollView 内部)内添加视图

    我有一个应用程序 点击一些后 会显示新闻内容的活动 我想在其底部显示注释 这些注释是在异步任务中动态加载的 一种方法是使用 ListView 和自定义 ArrayAdapter 但是 我必须将 ListView 放入 ScrollView
  • 无法将搜索栏拖动到滚动视图内

    如果这个问题在其他地方得到了回答 我深表歉意 我找不到任何有同样问题的人 我将 SeekBar 添加到位于嵌套 ScrollView 内的relativelayout 但是 我无法拖动搜索栏的拇指 我可以沿着其路径单击来更改其值 但无法拖动
  • iOS 中拉动刷新跳转

    当我慢慢下拉刷新时 我看到 UIActivityIndi cator 圆圈在开始刷新之前慢慢变得更加完整 就在圆圈完成并且刷新实际触发之前 内容会向下跳跃 急速跳动 然后圆圈开始旋转 我只有在慢慢拉下时才会注意到这一点 我正在使用拉动来刷新
  • 如何使用 SwiftUI 在 ScrollView 中选择一个项目?

    我想要完成的是有一个项目循环 我可以点击其中一个项目 一旦点击它就会以编程方式变得更大 这是我的代码和到目前为止的结果 struct ContentView View State var emojisArray State var sele
  • jQuery Mobile 只滚动内容,而不是整个页面

    我正在使用 jQuery Mobile 和 Phonegap 构建一个应用程序 现在 当我获得一个页面并需要滚动时 jQuery Mobile 会滚动整个页面 而不是内容 滚动条应该仅位于内容部分所在的位置 但看起来滚动条会滚动整个页面 它
  • 警告:函数作为 React 子项无效。 (反应原生)

    我收到错误 警告 函数作为 React 子项无效 我正在编写一个 React Native 应用程序 interface RegisterScreenProps navigation NavigationContainerRef const
  • Android 滚动视图在添加文本时自动滚动

    我在 Android 应用程序中有一个包含文本视图的滚动视图 此文本视图将按设定的时间间隔连续附加文本 滚动有效并且文本添加得很好 但我想做的是在添加文本时让滚动视图自动向下滚动 当新文本添加到底部时 它会自动向下滚动以匹配 而旧文本会在顶
  • 如何创建不在 ScrollView 中或已禁用 ScrollView 的 ListView?

    我想要 ListView 中的一些好东西 例如能够使用 ListAdapter 和项目选择等 但我不想要其中的 ScrollView 部分 我想以不同的方式自己实现该部分 为什么或如何做到这一点并不是这个问题的重点 所以请不要问 为什么 有
  • SwiftUI ScrollView 只向一个方向滚动

    尝试使用视图作为列表行样式来创建自定义列表 以摆脱默认情况下列表中难看的分隔线 但是 一旦我将 ZStack 行放入滚动视图中 滚动视图就会在两个方向上滚动 而不仅仅是垂直滚动 这是内容视图 NavigationView ScrollVie

随机推荐

  • 约瑟夫环问题(报数问题)

    先说一下什么是约瑟夫环问题 这是百科的解释 约瑟夫环 约瑟夫问题 是一个数学的应用问题 已知n个人 以编号1 2 3 n分别表示 围坐在一张圆桌周围 从编号为k的人开始报数 数到m的那个人出列 他的下一个人又从1开始报数 数到m的那个人又出
  • 如何在csdn免费下载资料?

    1 可以在个人设置里 绑定手机账号奖励整整50分 点下头像一个人中心一账号设置一手机绑定 2 完成任务 任务要在http task csdn net 里才能看到 3 上传有效 有效啊 别上个广告啊 非法啥的 反而还扣了 资源 4 评论资源
  • QT 5.8

    QT与Qt Creator 前者是框架 类似与MFC 而后者是QT的编译器 也可以使用Visual studio编辑 编译需要其他的 Index of new archive qt 5 8 5 8 0
  • MySQL的体系架构

    文章目录 前言 MySQL的Server层 MySQL的存储引擎 1 InnoDB 存储引擎 2 MyISAM 存储引擎 3 Memory 存储引擎 前言 在学习一种事务之前 我们需要先了解事物的基本组成结构 清楚了事物的基本组成结构之后
  • Linux或者ubuntu子系统中OpenMPI的安装

    在Linux中安装MPI Message Passing Interface 需要以下步骤 检查依赖项 首先 确保系统已经安装了必要的编译工具和库文件 运行以下命令更新软件包并安装所需依赖项 sudo apt update sudo apt
  • 【C语言】实现字符串逆序输出(包含空格的字符串)

    1 目的 实现字符串的逆序输出 比如I believe you 变为you believe I的形式 2 基本思路 这里我们先创建一个可以实现逆序打印的函数 将字符串逆序变为 uoy eveileb I 然后再将每个字符串逆序 从而变为yo
  • java 基础重学(一)-面向对象

    一 什么是面向过程 面向过程 是一种以事件为中心的编程思想 编程的时候把解决问题的步骤分析出来 然后用函数把这些步骤实现 在一步一步的具体步骤中再按顺序调用函数 自顶向下 逐步求精 模块化封装函数主张按功能把软件系统逐步细分 对每个涉及到的
  • 华为OD机试真题 Java 实现【整数对最小和】【2022Q4 100分】,附详细解题思路

    一 题目描述 给定两个整数数组array1 array2 数组元素按升序排列 假设从array1 array2中分别取出一个元素可构成一对元素 现在需要取出k对元素 并对取出的所有元素求和 计算和的最小值 注意 两对元素如果对应于array
  • 在win10, win11 家庭版中安装远程桌面服务

    win10 win11 家庭版中提供远程桌面服务 简介 在windows家庭版中 是不提供远程桌面服务的 你没有办法使用远程桌面连接到windows家庭版中 当然 你可用升级windows 版本到专业版 这样就可用享受到windows自带的
  • MySQL从5.6版本到5.7版本的升级过程

    MySQL从5 6版本到5 7版本的升级过程 二进制升级过程 1 介绍 此处因原有的版本就是5 6的 就不再赘述5 6的安装过程了 原有数据库5 6的目录情况 basedir usr local mysql base目录是做的软链 指向my
  • Matplotlib输出中文显示问题

    Matplotlib输出中文显示问题 试过觉得有用的办法 http www 360doc com content 14 0713 12 16740871 394080556 shtml
  • ggplot2读书笔记6:第四章 语法 基础理论

    碎碎念ing 终于结束了 ggplot2 的第一部分 Getting Started 今天开始看第二部分 语法 第四章 Mastering the Grammar 介绍了ggplot2的一些基础语法知识 大概是对前期内容在理论上做一个总结
  • x390拆机 升级内存和硬盘_战66拆机加内存折腾手记

    前言 今年6 18时入HP 战66二代AMD版时就在计划双十一时升级内存到16G 并顺带加个机械硬盘 结果用了4个多月后感觉目前硬盘空间尚无压力 所以只计划加内存 晒单 之前有朋友用过芝奇 说还不错 既有逼格也有保障 没有等到11 11当天
  • openGL增强表面细节----高度贴图

    openGL系列文章目录 文章目录 openGL系列文章目录 前言 一 代码 主程序c 效果 前言 现在我们扩展法线贴图的概念 从纹理图像用于扰动法向量到扰乱顶点位置本身 实 际上 以这种方式修改对象的几何体具有一定的优势 例如使表面特征沿
  • 简单的移动阵型补全

    需求 模拟企鹅群以一种三角形的阵型移动 并向目标发动冲击 冲击时候的企鹅不在跟随阵型移动 阵型内的企鹅跟随阵型移动 并且会自动补全阵型 企鹅群体大概是这样的阵型 o o o o o o 可以抽象成一个数组 fromation new int
  • SQL中partition关键字的使用

    最近在写后台语句时候 运用到了partition这样一个关键字 先大致说一下背景 有一种数据表 如下 现在需要取出 每一个人最近的一次打卡时间 思路是 先把数据按照人名分组 然后在每个组里面按照时间排倒叙 最后取出每组的第一条数据即可 pa
  • 【Hadoop学起来】Linux配置$HADOOP_HOME/etc/hadoop/hadoop-env.sh时找不到JAVA_HOME?

    正文之前 今天很气愤 想要学点东西 但是老是被环境所限制 Hadoop这个见鬼的环境 我只是运行单机模式 结果就是都不成功 好不容易磕磕盼盼的终于把啥缺的东西都找出来了结果最后还是失败了 暂时我真的不想去看失败记录 因为快要睡了明天再说吧
  • Premiere Pro 2022有哪些新增功能吸引了你

    Premiere Pro2022正式出现在大家的面前 那么如此大版本的更新 都有哪些变化呢 今天我们就来谈谈pr22版本的变化 安装 Premiere Pro 2022中文 图形和标题 Premiere Pro 中的图形和字幕工作流程具有多
  • 华为星闪联盟:引领无线通信技术创新的先锋

    星闪 NearLink 是由华为倡导并发起的新一代无线短距通信技术 它从零到一全新设计 是为了满足万物互联时代个性化 多样化的极致 创新体验需求而诞生的 这项技术汇聚了中国300多家头部企业和机构的集体智慧 华为更是其中的主要贡献方 在过去
  • 微信小程序scroll-view滚动到指定位置

    自动滚动到指定位置 在小程序开发过程中 为了满足一个特殊的要求 因此需要一个特殊的功能 即在打开小程序数据加载完成的时候 需要页面自动滚动到指定位置 或者页面的底部 在各种度度 狗狗之后 通过各种尝试 算是找到了一个比较完美的方案 微信扫描