微信小程序 - 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 ...
随机推荐
- 填坑 bzoj3337
算是个板子题吧,就是不知道啥时候能写出来. #include<cstring> #include<iostream> #include<cctype> #inclu ...
- spark基础知识四
围绕spark的其他特性和应用.主要包括以下几个方面 spark自定义分区 spark中的共享变量 spark程序的序列化问题 spark中的application/job/stage/task之间的 ...
- 基于Linux(中标麒麟)上QT的环境搭建
最近由于公司需要,需要在中标麒麟上进行QT的二次开发,但是网上的资料很少,就算是有也基本都是其他的版本的Linux上的搭建.中标麒麟本身的资料也很好,而且还只能试用60天. 下面就介绍下我对此环境的搭 ...
- JS中 (function(){...})()立即执行函数
(function(){...})() (function(){...}()) 这是两种js立即执行函数的常见写法. 基本概念: 函数声明:function fname(){...}; 使用funct ...
- Java集合详解8:Java集合类细节精讲,细节决定成败
<Java集合详解系列>是我在完成夯实Java基础篇的系列博客后准备开始写的新系列. 这些文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查 ...
- 深入理解 HTTP/1.x、HTTP/2 和 HTTPS
很多站长可能到现在都没有理解 HTTP/1.x.HTTP/2 和 HTTPS 之间的区别和关系吧?说实话,明月也是“一知半解”的水准而已,今天看到了这篇文章感觉总结还算是比较全面,特此分享出来给大家就 ...
- Centos查看虚拟机IP地址及使用XShell连接
1.在VMware中安装Centos7系统[1] 2.查看虚拟机里的Centos7的IP[2] 1)查看IP 输入ip查询命名 ip addr 发现 ens33 没有 inet 这个属性,那么就没法通 ...
- kali无法安装nvidia显卡驱动
按照各位大神的博客安装nvidia显卡驱动一直失败,重启之后无法正常进入系统,恢复模式可以进入,一直以为自己是不是哪里步骤不对,后面来回重装了几次系统. 最后意识到虚拟机里用的是虚拟网卡,并非宿主机的 ...
- Python实现Newton和lagrange插值
一.介绍Newton和lagrange插值:给出一组数据进行Newton和lagrange插值,同时将结果用plot呈现出来1.首先是Lagrange插值:根据插值的方法,先对每次的结果求积,在对结果 ...
- Java.util.Math类--数学相关的工具类
Math类--数学相关的工具类 java.util.Math类是数学相关的工具类,里面提供了大量的静态方法,完成与数学运算相关的操作. public static double abs(double ...