微信小程序 - 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 ...
随机推荐
- 【DP】【P5615】 [MtOI2019] 时间跳跃
Description 给定 \(n\) 条边,第 \(i\) 条边的长度为 \(i\),每条边都有 \(50\%\) 的概率被选择,求如果选出的边能组成一个平面凸多边形,则方案的权值是方案中边的数量 ...
- Spring Boot 知识笔记(配置文件)
Spring boot 提供了两种常用的配置文件,properties和yml文件. 1.yml yml是YAML(YAML Ain't Markup Language)语言的文件,以数据为中心,比j ...
- Ubuntu16.04安装Filebeat
Filebeat官方文档地址 https://www.elastic.co/guide/en/beats/filebeat/current/filebeat-installation.html 下载和 ...
- Gamma阶段事后分析
设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件要解决的是安卓游戏的自动化异常检测问题,定义的足够清楚,对于典型用户的描述和典型场景的描述也足 ...
- Azure DevOps Server 2019 第一个补丁包(2019.0.1 RTW)
在Azure DevOps Server 2019正式发布后的2周左右时间,微软快速发布了第一个补丁包Azure DevOps Server 2019.0.1 RTW.Azure DevOps Ser ...
- AVLMap平衡二叉树
public class AVLMap<K, V> implements Iterable<AVLEntry<K, V>> { private int size; ...
- Linux内核device结构体分析
1.前言 Linux内核中的设备驱动模型,是建立在sysfs设备文件系统和kobject上的,由总线(bus).设备(device).驱动(driver)和类(class)所组成的关系结构,在底层,L ...
- linux -------------- Linux系统安装jdk
linux 安装软件有三种方式 tar (解压安装 ) rpm (直接安装) yum(在线) 安装主要步邹 1.下载jdk 软件包 2.检测是否安装 查看已安装jdk软件包 rpm -qa|grep ...
- Controller如何进行重定向跳转
因为在Controller的返回都是默认走视图解析器的InternalResourceViewResolver,而视图解析器都是进行请求转发,需要在返回时地址前加入字符redirect: 视图解析器不 ...
- python之路——阅读目录
阅读目录 希望大家多多交流,有错误的地方请随时指正,笔记记得可能有点杂 一.python入门 计算机基础 编程语言发展史和python安装 二.数据类型.字符编码.文件处理 python基础数据类型 ...