文档章节

微信小程序实现锚点定位

别寒
 别寒
发布于 2017/02/07 10:19
字数 114
阅读 1291
收藏 0

wxml:

<!--index.wxml-->
<view class="container">
<!--品牌-->
<scroll-view scroll-y="true" scroll-into-view="{{toView}}"> 
  <view wx:for="{{citysMap}}">
    <view class="ncq-smal" id="{{index}}">
      {{index}}
    </view>
    <view wx:for="{{item}}" wx:for-item="citys" class="ncq-box" 
         data-cityname="{{citys.city_name}}" bindtap="cityNameClick">
            <label class="ncq-brand-name">{{citys.city_name}}</label>
    </view>
  </view>
</scroll-view>
 <!--  字母导航-->
    <view class="ncq-fixe-nav">
            <view  wx:for="{{citysMap}}" data-letter="{{index}}" bindtap="rightZmClick">
                <label>{{index}}</label> 
            </view>
    </view>
   <!-- 字母导航end-->
</view>

js:

  //字母锚链定位
  topZmClick: function (event) {
    var letter = event.currentTarget.dataset.letter;
    this.setData({
      toView: letter
    })
  },

wxss:

scroll-view {
  height: 600px;
}

注:scroll-view必须要设置高度,不然无效

© 著作权归作者所有

别寒
粉丝 30
博文 273
码字总数 155300
作品 0
永州
程序员
私信 提问
加载中

评论(2)

别寒
别寒 博主

引用来自“知晓程序”的评论

你好!我们是爱范儿旗下专注于小程序生态的公众号知晓程序(微信号 zxcx0101)。我们很赞赏你的文章,希望能获得转载授权。授权后,你的文章将会在知晓程序社区(minapp.com)、爱范儿、AppSo 等渠道发布。此外,由于第三方同步抓取功能,您的内容也可能会被同步发表到今日头条、搜狐、网易号等,我们会注明来源和作者姓名。

非常感谢~~~

回复@知晓程序 : 谢谢你的喜欢,有需要的话可以转载,多谢分享。还有,请问可以注明我的名字吗?我的名字是何洪波,qq:1654605193
知晓程序
知晓程序
你好!我们是爱范儿旗下专注于小程序生态的公众号知晓程序(微信号 zxcx0101)。我们很赞赏你的文章,希望能获得转载授权。授权后,你的文章将会在知晓程序社区(minapp.com)、爱范儿、AppSo 等渠道发布。此外,由于第三方同步抓取功能,您的内容也可能会被同步发表到今日头条、搜狐、网易号等,我们会注明来源和作者姓名。

非常感谢~~~
小程序端实现文本展示以及标题定位

探讨一个针对文本内容设置标题定位的业务场景。 业务场景 管理后台录入/编辑一段md或富文本协议,小程序端进行展示协议,且在小程序实现标题侧边栏,能快速定位至对应的内容。如图所示 管理后...

广州芦苇科技web前端
02/17
0
0
wx-jq:一套完全原创的微信小程序插件集合库

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 在线演示: 下载地址...

透笔度
2018/01/25
5.7K
4
微信小程序(游戏)----拖拽拼图(拖拽和切换功能的实现)

效果图 touchstart 获取当前触摸位置的坐标(x,y); 记录触摸点下view的各项坐标值; 记录触摸点下view的起点坐标,背景坐标,以及触摸点的坐标; 设置拖拽view为显示状态、设置起始坐标以...

m0_38082783
2018/03/15
0
0
luanyujia/sticky-tabs

微信小程序不使用scroll-view做的吸顶+锚点 引入组件 将 文件夹拷贝至自己的组件目录,页面 文件中配置组件 { "usingComponents": { "sticky": "/components/sticky/index", "sticky-item": ......

luanyujia
05/01
0
0
微信小程序实现横向滚动块--scroll-view

一、微信小程序scroll-view 设置可滚动视图区域 1.由于手机的宽度比较窄,出现横向滚动的需要很常见 2.scrool-x ,设置区域可以横向滚动 3.scrool-into-view ,设置滚动到指定的id 处,在搜索...

tianma3798
2018/08/24
916
0

没有更多内容

加载失败,请刷新页面

加载更多

Android面试常客之Handler全解

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/fnhfire_7030/article/details/79518819 前言:又到了一年...

shzwork
12分钟前
1
0
position sticky 定位

本文转载于:专业的前端网站➫position sticky 定位 1、兼容性 https://caniuse.com/#search=sticky chrome、ios和firefox兼容性良好。 2、使用场景 sticky:粘性。粘性布局。 在屏幕范围内时...

前端老手
19分钟前
1
0
CentOS 7 yum 安装 PHP7.3 教程

参考:https://www.mf8.biz/centos-rhel-install-php7-3/ 1、首先安装 EPEL 源: yum install epel-release 安装 REMI 源: yum install http://rpms.remirepo.net/enterprise/remi-release......

dragon_tech
34分钟前
1
0
Linux物理网卡聚合及桥接

Linux内部实现的bridge可以把一台机器上的多张网卡桥接起来,从而把自己作为一台交换机。同时,LInux bridge还支持虚拟端口,即桥接的不一定都是物理网卡接口,还可以是虚拟接口。目前主要表...

xiangyunyan
34分钟前
1
0
一起来学Java8(一)——函数式编程

在这篇文章中,我们将了解到在Java8下如何进行函数式编程。 函数式编程 所谓的函数式编程就是把函数名字当做值进行传递,然后接收方拿到这个函数名进行调用。 首先来看下JavaScript如何进行函...

猿敲月下码
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部