小程序用scroll-view的scroll-to-view属性实现锚链接跳转
小程序没有锚链接,通过scroll-view可以实现类似锚链接的功能,点击锚链接,滚动条滚动到相应的位置
wxml
<view class="wrap">
<!--tab切换列表-->
<view class="t-ul flex">
<view class="li flexitem" wx:for="{{facitems}}" wx:key="*this" data-toview="{{item.en}}"bindtap="activeItem">{{item.name}}</view>
</view>
<!--滚动的内容content-->
<scroll-view class="list-wrap"scroll-y scroll-into-view="{{toview}}">
<view class="weui-panel" id="device">
content1
</view>
<view class="weui-panel" id="phone">
content2
</view>
<view class="weui-panel" id="intro">
content3
</view>
</scroll-view>
</view>
wxss
// 这几个高度一定要设置,因为这里设置100%,所以父元素都设置100%,scroll-view才能继承父元素的高度,scroll-view一定要设置高度scroll-to-view才能生效
page{height: 100%;}
.wrap{font-size:26rpx;height: 100%;}
.t-ul{background: #fff;position:fixed;top:;z-index:;width:100%;}
.t-ul .li{height:70rpx;line-height: 70rpx;}
.list-wrap{height: 100%;padding-top:90rpx;}
js
Page({
data: {
facitems:[{name:"设施与服务",en:'device'},{name:"酒店电话",en:'phone'},{name:"酒店简介",en:'intro'}], // 这里item.en和content的id相同,相当实现锚链接
cate:'device' // 初始view的位置
},
onLoad(){
},
activeItem(e){
console.log(e)
this.setData({
cate: e.currentTarget.dataset.cate // 设置滚动到视图
})
}
})
小程序用scroll-view的scroll-to-view属性实现锚链接跳转的更多相关文章
- 小程序for循环给里面单独的view加单独的样式
效果图如下: 上面是个列表从数据库拿下来所有的信息:在视图层直接一个for循环展示下来,现在麻烦来了前三个和后面的额不一样,小程序不允许dom操作,那怎么解决呢? 解决办法: wx:for和wx:if ...
- 【小程序】页面无法更新tabbar角标属性时
在小程序论坛上找答案,一同问了,截图如下
- 小程序e.currentTarget与e.target 两个属性的区别
注册事件是获取小程序组件上面的自定义属性值 e.target是获取当前点击的标签上面的自定义属性 e.currentTarget是获取注册点击事件标签内的自定义属性
- 学习旧岛小程序 (5) observer 函数中修改属性的值
不要在一个属性的 observer 函数中修改属性的值 不然会造成内存泄露 错误代码: properties: { /* 期刊号 */ index: { type: String, observer ...
- 小程序之取标签中内容 例如view,text
// index.wxml页面 data-url为自定义 {{}}中内容可为后台请求到的数据 也可为固定内容例如:data-text="哈哈哈" data-url="ht ...
- 微信小程序云开发-云存储-带图片的商品列表携带id跳转至商品详情
一.商品列表页 1.wxml文件 在view中添加点击事件goToGoodDetail,绑定数据data-id <!-- 添加点击事件goToGoodDetail --> <view ...
- 小程序开发 event对象中 target和currentTarget 属性的区别。
首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素 p包含在div内 在outer上点击时,target跟currentTarget ...
- 微信小程序:给data中对象中的属性设置值与给data中的属性或对象或数组设置值的区别
一.给data中的属性或对象或数组设置值,属性名不需要加引号 this.setData({ material: param, // 这里material为对象 } this.setData({ d ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
随机推荐
- linux Nginx 日志脚本
这篇文章主要介绍了nginx日志切割脚本.nginx日志分析脚本等,需要的朋友可以参考下. 参考自:http://www.jbxue.com/article/13927.html 任务计划 cront ...
- Atitit.注册跟个登录功能的实现attilax总结obo
Atitit.注册跟个登录功能的实现attilax总结obo 1. 注册模块 2 1.1. 基本注册功能(用户名方式) 2 1.2. 动态ajax监测用户名重复 2 1.3. 注册手机验证 2 1.4 ...
- 使用tc对linux中某ip段限速
TC 无需安装,Linux 内核自带例:将IP地址段192.168.1.0/24 上传下载限速为 5M将以下内容添加到/etc/ppp/ip-up文件exit 0上面. down=5Mbituploa ...
- PHP.ini中配置屏蔽错误信息显示和保存错误日志
在PHP程序运行过程中如果有错误发生,在浏览器上是否显示错误信息,以及显示错误信息的级别是我们在程序开发.调试.运营过程中需要控制的. root@(none):/alidata/www/default ...
- 每日英语:Why Chinese Companies Lack Homegrown Luxury Brand Power
Chinese companies build iPads, high-speed trains and world-class telecom gear, but they can't seem t ...
- GDB和WinDbg中调用函数
GDB: 特别简单,直接写调用式子即可,如下图的p word.c_str(),其中word的类型是std::string WinDbg:目前都说是.call命令,说实话我宁愿不用...见: http: ...
- C++按行读取和写入文件
按行读取: 假设有一个文本文件,如下所示: 1 2 32 3 43 4 55 6 77 8 9 文件名为split.txt 目的:按照行读取数据,并一个个的显示出来. 代码如下: #include & ...
- ERROR: openstack Error finding address for http://10.16.37.215:9292/v1/images: [Errno 32] Broken pipe
Try to set: no_proxy=10.16.37.215 this should help 转自: http://askubuntu.com/questions/575938/error-i ...
- 一条SQL语句查询两表中两个字段
首先描述问题,student表中有字段startID,endID.garde表中的ID需要对应student表中的startID或者student表中的endID才能查出grade表中的name字段, ...
- thinkPHP 上传文件的中文乱码
最新版本~用了里面的上传文件类,发现在保存文件原本名称的时候当有中文名的时候保存文件会显示乱码,看了下源代码发现在Tp上传驱动那里有点问题. // if (!move_uploaded_file($f ...