小程序没有锚链接,通过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属性实现锚链接跳转的更多相关文章

  1. 小程序for循环给里面单独的view加单独的样式

    效果图如下: 上面是个列表从数据库拿下来所有的信息:在视图层直接一个for循环展示下来,现在麻烦来了前三个和后面的额不一样,小程序不允许dom操作,那怎么解决呢? 解决办法: wx:for和wx:if ...

  2. 【小程序】页面无法更新tabbar角标属性时

    在小程序论坛上找答案,一同问了,截图如下

  3. 小程序e.currentTarget与e.target 两个属性的区别

    注册事件是获取小程序组件上面的自定义属性值 e.target是获取当前点击的标签上面的自定义属性 e.currentTarget是获取注册点击事件标签内的自定义属性

  4. 学习旧岛小程序 (5) observer 函数中修改属性的值

    不要在一个属性的 observer  函数中修改属性的值 不然会造成内存泄露 错误代码: properties: { /* 期刊号 */ index: { type: String, observer ...

  5. 小程序之取标签中内容 例如view,text

    // index.wxml页面 data-url为自定义 {{}}中内容可为后台请求到的数据 也可为固定内容例如:data-text="哈哈哈" data-url="ht ...

  6. 微信小程序云开发-云存储-带图片的商品列表携带id跳转至商品详情

    一.商品列表页 1.wxml文件 在view中添加点击事件goToGoodDetail,绑定数据data-id <!-- 添加点击事件goToGoodDetail --> <view ...

  7. 小程序开发 event对象中 target和currentTarget 属性的区别。

    首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素 p包含在div内 在outer上点击时,target跟currentTarget ...

  8. 微信小程序:给data中对象中的属性设置值与给data中的属性或对象或数组设置值的区别

    一.给data中的属性或对象或数组设置值,属性名不需要加引号 this.setData({ material: param, // 这里material为对象 } this.setData({   d ...

  9. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

随机推荐

  1. mysql create dabase 语法详解

    由于SQL标准的存在,各个关系型数据库管理系统中创建库的语句都差不多 一.mysql 中创建数据库的语法如下: 1.创建数据库的语法: create {database | schema } [if ...

  2. php比较函数,判断安全函数

    一.字符串比较函数: int strcasecmp ( string $str1 , string $str2 ) int strcmp ( string $str1 , string $str2 ) ...

  3. alloc retain release函数

  4. 第7章 Iptables与Firewalld防火墙。

    第7章 Iptables与Firewalld防火墙.     Chapter7_听较强节奏的音乐能够让您更长时间的投入在学习中. <Linux就该这么学> 00:00/00:00     ...

  5. wifi免密码登录认证流程

    您查询的关键词是:weixin:,qrgex_zm- 以下是该网页在北京时间 2016年03月27日 02:46:42 的快照: 如果打开速度慢,可以尝试快速版:如果想保存快照,可以添加到搜藏:如果想 ...

  6. CMWAP上网补丁描述文件!!支持ios9

    由于ios移动4G使用cmnet网络,某些情况下需要使用cmwap,因此就有了这些文字... 两个网址都可以: http://www.clore.net/iphone/cmwap.html https ...

  7. Ununtu 15.04 安装MySql(Django连接Mysql)

    本文介绍Ubuntu 15.04下安装MySQL ubuntu 15.04安装mysql django项目连接mysql 一.安装数据库 1.sudo apt-get install mysql-se ...

  8. Redis常用命令解析——INFO, MONITOR, SLOWLOG

    1. INFO info指令返回服务器相关信息,包括: server: General information about the Redis server clients: Client conne ...

  9. 003很好的网络博客(TCP/IP)-很全

    http://www.cnblogs.com/obama/p/3292335.html 很全的计算机网络方面的资料.

  10. Struts2的拦截器是如何使用AOP工作的

    拦截器(interceptor)是Struts2最强大的特性之一,也可以说是struts2的核心,拦截器可以让你在Action和result被执行之前或之后进行一些处理.同时,拦截器也可以让你将通用的 ...