微信小程序 - 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 ...
随机推荐
- Docker入门笔记(Centos7)
centos7 wget https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/centos/docker-ce.repo vim docker-c ...
- base64和Blob互相转换
1.base64转blob(二进制数据) /** * 将以base64的图片url数据转换为Blob * @param urlData 用url方式表示的base64图片数据 */ functio ...
- python 项目实战之备份文件夹并且压缩文件夹及下面的文件
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019/11/12 14:21 # @Author : zoulixiang # @S ...
- 运维-nginx +php 错误状态码说明
常用 nginx 错误码: 正常: 200 正常访问 301 永久跳转访问 302 临时跳转访问 常见错误状态码: 400 ,经常有服务器自己调用 自己的情况 用报400,如高防调用高防,或者lv ...
- 【Appium + Python3】之安卓8.1,使用xpath定位不到元素
desired_cap = { "deviceName":"vivo", # 真机名称 "platformName":"andro ...
- python模块、异常
1. python 模块 模块是一个包含所有你定义的函数和变量的文件,其后缀名是.py.模块可以被别的程序引入,以使用该模块中的函数等功能.这也是使用 python 标准库的方法.(有点像java的c ...
- 关于 golang build
如何编译 golang 的编译还是比较容易的,用法如下: go build [-o output] [-i] [build flags] [packages] 上面方括号标记的参数,都可以没有-- 最 ...
- DDR3(5):读写仲裁
上一讲我们完成了读的控制,但是并不知道是否设计成功,必须读写结合才行.DDR3 的 app 端的命令总线是读写复用的,因此可能会存在读写冲突的时刻,为了解决此问题,必须进行分时读写,也就是我们说的仲裁 ...
- setInterval的使用
可以通过设置标识,判断方法是否执行完 var interval = setInterval(function () { if( flag > 0 ){ clearInterval(interva ...
- HTML的attribute和DOM的property剖析(转)
原文:https://www.jianshu.com/p/efc704d713c7 HTML attribute 与 DOM property 的对比 该文摘自angular的官方文档,老外对概念的解 ...