微信小程序 - 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 ...
随机推荐
- debian 9 安装远程桌面
1. 安装远程桌面服务: apt-get install xrdp 2. 修改设置文件 dpkg-reconfigure xserver-xorg-legacy 设置为anybody 3. 使用ms ...
- 【数论】[圆点坐标]P2508圆上的整点
题目描述 求一个给定的圆\(x ^2 +y ^2 = r ^2\),在圆周上有多少个点的坐标是整数 Solution 圆上的点坐标通解:\(x = d\frac{v^2-u^2}{2},y = duv ...
- TensorFlow常用激活函数及其特点和用法(6种)详解
http://c.biancheng.net/view/1911.html 每个神经元都必须有激活函数.它们为神经元提供了模拟复杂非线性数据集所必需的非线性特性.该函数取所有输入的加权和,进而生成一个 ...
- Hbase安装使用
启动Hadoop 启动Hbase jps 进入shell 建立表及使用
- Vue.js之入门
1.What is Vue.js? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架,通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 2.引入 ...
- 【2019年05月20日】A股滚动市盈率PE历史新低排名
2010年01月01日 到 2019年05月20日 之间,滚动市盈率历史新低排名. 上市三年以上的公司, 2019年05月20日市盈率在300以下的公司. 1 - 阳光照明(SH600261) - 历 ...
- asbDio (asbDio.dll)
using System;using System.Collections.Generic;using System.Text;using System.Runtime.InteropServices ...
- windows x64安装与测试redis
说明:安装与测试的系统为windows X64: 1.下载redis:https://github.com/microsoftarchive/redis/releases 2.解压Redis-x64- ...
- 新添加的用户无法sudo解决方案
问题:xxx(用户名) is not in the sudoers file. This incident will be reported. 用户管理: 1.创建用户 (1)方法1 $ sudo a ...
- SQL Server ----- 还原数据库,将另一台电脑上的数据库装在本机
1.创建好数据库,记住安装位置,,和需要还原的数据库的位置 还原数据库的意思就是 根据创建的数据库,还原备份的数据库,如果数据库中没有数据库要新建数据库. 2.进来后如图 3.找你需要的还原数据库的位 ...