微信小程序 - scroll-view的scroll-into-view属性 - 在页面打开后滚动到指定的项
需求: 这是一个可横向滚动的导航条,现在要求我,从别的页面reLaunch回到首页这里,刷新页面内容的同时,菜单项要滚动出来
(如果该菜单项不在可视区域),而不是让他被挡住。 代码:
<scroll-view class="nav-scroll" scroll-x="{{true}}" nenable-flex="{{true}}"
scroll-into-view="{{toView}}" scroll-with-animation="{{true}}">
<view bindtap="changeCategory" wx:for="{{nav_menu}}" class="nav-tab"
data-index="{{index}}" id="cate{{index}}">
<text class="{{menu_active==index ? 'active' : ''}}">{{item.name}}</text>
<view wx:if="{{menu_active == index}}" class="tab-line"></view>
</view>
</scroll-view> --------------------------------------------------------
that.setData({
nav_menu: res.data,
},()=>{
that.setData({
toView: 'cate' + that.data.menu_active
})
});
尝试过在onLoad、onShow、onReady下重新赋值toView,但是始终不起作用。再后来...
幸亏看到了说数据(菜单列表)渲染未完成,导致打开页面滚动指定位置失败的原因,然后提供的办法是
使用setData的回调,棒呆!!! 众里寻解决办法于百度,那答案却在微信开放社区处...
https://developers.weixin.qq.com/community/develop/doc/0006e8383f4f906c4ac6fe01456804
微信小程序 - scroll-view的scroll-into-view属性 - 在页面打开后滚动到指定的项的更多相关文章
- 原创:新手布局福音!微信小程序使用flex的一些基础样式属性
来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...
- 微信小程序-06-详解介绍.js 逻辑层文件-注册页面
上一篇介绍的是 app.js 逻辑层文件中注册程序,对应的每个分页面都会有的 js 文件中 page() 函数注册页面 微信小程序-06-详解介绍.js 逻辑层文件-注册页面 宝典官方文档: http ...
- 第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现
第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现 开发环境搭建 使用自己的AppID新建小程序项目,后端服务选择小程序·云开发,点击新建,完成项目新建. 新建成功后跳转到开发者工具界面 ...
- 微信小程序从零开始开发步骤(六)4种页面跳转的方法
用法:用于页面跳转,相当于html里面的<a></a>标签. API教程:https://mp.weixin.qq.com/debug/wxadoc/dev/component ...
- 微信小程序基础之试图控件View、ScrollView、Swiper
今天写一篇关于微信小程序视图控件的文章,主要是介绍界面的搭建和部分操作js交互功能的介绍,转载请注明出处,谢谢~ 首先显示首页结构.创建三个navigator,用来跳转页面: <!--index ...
- 微信小程序的wxs语法与vue计算属性
微信小程序的wxs语法 可以当做vue的计算属性和vue filter 使用.因为wxs中的函数可以写在{{ }}中 . 例如: 可用在 <view>{{ foo() }}</v ...
- 微信小程序学习笔记(二)--框架-全局及页面配置
描述和功能 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑. 响应的数 ...
- 微信小程序学习——框架视图层(view)
视图层是有WXML与WXSS编写的,由组件来进行展示. WXML(WeiXin Markup Language)用于写页面结构的. WXSS(WeiXin Style Sheet)用于页面的样式. 组 ...
- 微信小程序云开发-云存储-上传、下载、打开文件文件(word/excel/ppt/pdf)一步到位
一.wxml文件 <!-- 上传.下载.打开文件一步执行 --> <view class="handle"> <button bindtap=&quo ...
随机推荐
- Java实现递归阶乘
public class Factorial{ public static void main(String[] args){ for (int i = -5; i <= 5; i++) { S ...
- 洛谷p1559运动员最佳匹配问题
题目 搜索 可行性剪枝 虽然这题目是我搜二分图的标签搜到的 但是n比较小 明显可以暴力 然而只有80分 再加上可行性剪纸就行啦 就是记所有运动员他所能匹配到的最大值. 在我们搜索到第i层的时候 如果他 ...
- iptables 数据走向流程
链的规则存放于哪些表中(从链到表的对应关系): PREROUTING 的规则可以存在于:raw表,mangle表,nat表. INPUT 的规则可以存在于:mangle表,filter表,(cento ...
- Guava 源码分析之Cache的实现原理
Guava 源码分析之Cache的实现原理 前言 Google 出的 Guava 是 Java 核心增强的库,应用非常广泛. 我平时用的也挺频繁,这次就借助日常使用的 Cache 组件来看看 Goog ...
- [技术博客]使用wx.downloadfile将图片下载到本地临时存储
目录 目标 代码展示 重点讲解 目标 在上一篇技术博客中,我们生成的海报中包含图片,这些图片是存储到服务器上的,而canvas的drawimage函数只能读取本地文件,因此我们在drawCanvas之 ...
- CentOS安装PinPoint
1.软件准备 jdk-8u191-linux-x64.tar.gz,下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8 ...
- 框架Ray
高性能最终一致性框架Ray之基本概念原理 一.Actor介绍 Actor是一种并发模型,是共享内存并发模型的替代方案. 共享内存模型的缺点: 共享内存模型使用各种各样的锁来解决状态竞争问题,性能低下且 ...
- [转帖]Kubernetes v1.17 版本解读 | 云原生生态周报 Vol. 31
Kubernetes v1.17 版本解读 | 云原生生态周报 Vol. 31 https://www.kubernetes.org.cn/6252.html 2019-12-13 11:59 ali ...
- Java核心技术-读书笔记
基本语法 Java中的所有函数都属于某个类的方法 Java没有任何无符号的int.long.short 或 byte 类型 浮点数值不适用于无法接受舍入误差的金融计算中,比如2.0-1.1不会输出想要 ...
- C语言注释风格
注释风格 一.前言 注释是源码程序中非常重要的一部分,一般情况下,源程序有效注释量必须在20%以上. 注释的原则是有助于对程序的阅读理解,所以注释语言必须准确.易懂.简洁,注释不宜太多也不能太少,注释 ...