小程序没有锚链接,通过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. selenium 实现浏览器 前进和后退

    #coding=utf-8from selenium import webdriver driver = webdriver.Chrome()driver.get("https://www. ...

  2. atitit.故障排除------有时会错误com.microsoft.sqlserver.jdbc.SQLServerException: Connection reset by peer: soc

    atitit.故障排除------有时会错误com.microsoft.sqlserver.jdbc.SQLServerException: Connection reset by peer: soc ...

  3. 0067 MySQL的日期字段的取值用单引号

    这两天在做sql练习题http://www.cnblogs.com/zxx193/p/4000467.html的时候,涉及到下面的建表+插数据操作 CREATE TABLE t1( s_no VARC ...

  4. FreeRtos——单任务

    原创(当然借鉴了官网资料^_^): 在之前的移植工作准备好之后,我们需要调用freertos提供给我们的API函数实现操作系统地运行.首先,第一个函数: 任务函数任务是由 C 语言函数实现的.唯一特别 ...

  5. python学习笔记(2)--sublimeText3运行python

    https://www.zhihu.com/question/22904994 知乎用户 To the knowledge 74 人赞同 如果是想在sublime里要python shell那种交互或 ...

  6. 一款基于jQuery的图片下滑切换焦点图插件

    之前为大家分享了好多款jquery插件,今天我们要分享的一款jQuery插件也比较实用,是一款jQuery焦点图插件.焦点图相当普通,一共可以循环播放4张图片,并且每一张图片在切换的时候都是向下滑动的 ...

  7. base64变形注入与联合查询注入的爱情故事

    先来写一下GET的知识点: 1.知道了convart函数(CONVERT函数是把日期转换为新数据类型的通用函数) 2.Illegal mix of collations for operation ' ...

  8. lua字符串对齐函数

    最近要用到字符串对齐,开始只是一部分字符串,就直接加空格了,后来发现有很多, 于是写了个字符串对齐的函数. --功能:分割字符串 --参数:带分割字符串,分隔符 --返回:字符串表 function ...

  9. Android4.4之后休眠状态下Alarm不准时的问题

    Android4.4及之后休眠状态下Alarm不准时的问题 为了减轻功耗,延长电池使用时间.Android 4.4及之后的版本号採用非精准闹钟机制.以及休眠状态下的wakeup类型的alarm不会实时 ...

  10. spark读取gz文件

    spark 1.5.1是支持直接读取gz格式的压缩包的,和普通文件没有什么区别: 使用spark-shell进入spark shell 交互界面: 输入命令: sc.textFile("\h ...