资讯专栏INFORMATION COLUMN

小程序根据索引滚动指定的位置

mating / 1359人阅读

摘要:完成的效果大概是这样的实现需要组件属性需要的数据简要逻辑说明根据数据循环出对应的索引和数据,左侧字母索引悬浮,右侧数据顺序展示右侧数据每个的对应左侧的字母索引不能以数字开头点击左侧字母通过改变的值就完成了。

完成的效果大概是这样的

实现需要组件

scroll-view

scroll-view 属性 scroll-into-view

需要的数据

简要逻辑说明

根据数据循环出对应的索引和数据,左侧字母索引悬浮,右侧数据顺序展示

右侧数据每个view的id对应左侧的字母索引【id不能以数字开头】

点击左侧字母通过改变scroll-into-view的值就完成了。

代码片段

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95929.html

相关文章

  • 从入门到上线一个天气程序

    摘要:天气预报小程序说了很多小程序开发的基础准备,下面就结合个人实际练手项目天气预报小程序简单说明。物料准备从需求结果导向,天气程序首先要能获取到当前所在地天气状况,再次可以自由选择某地,知道其天气状况。 前言 学习了一段时间小程序,大致过了两遍开发文档,抽空做个自己的天气预报小程序,全当是练手,在这记录下。小程序开发的安装、注册和接入等流程就不罗列了,在小程序接入指南已经写得很清楚了,以下...

    Anshiii 评论0 收藏0
  • 编写chameleon跨端组件正确姿势(下篇)

    摘要:在编写跨端组件的正确姿势上篇中,我们介绍了如何使用第三方库封装跨端组件,但是绝大多数组件并不需要那样差异化实现,绝大多数情况下我们推荐使用语法统一实现跨端组件。 在chameleon项目中我们实现一个跨端组件一般有两种思路:使用第三方组件封装与基于chameleon语法统一实现。在《编写chameleon跨端组件的正确姿势(上篇)》中, 我们介绍了如何使用第三方库封装跨端组件,但是绝大...

    xiongzenghui 评论0 收藏0
  • 一步一步实现字母索引导航栏

    摘要:第步实现内容列表跳转至索引字符到这里其实索引导航栏组件的开发已经结束,不过毕竟看不到效果嘛,所以就实现了简单的内容列表组件,从而可以对导航栏组件进行测试。 先来看下实现后的效果: showImg(https://segmentfault.com/img/remote/1460000007686588?w=277&h=487); 链接:在线DEMO,源代码 这个索引导航栏的效果在很多 A...

    W_BinaryTree 评论0 收藏0
  • 微信程序picker组件遇到问题与解决方案

    摘要:几个主要属性选取范围,数据类型为,为普通选择器时,有效的值表示选择了中的第几个下标从开始,数据类型肯定是绑定事件,改变时触发事件,。代码如下选项一选项二选项三一二三四五这样,一个页面使用多个的问题就解决了。但在发现小一个问题。 一、picker基本概念 当然先看官方文档 picker说明搞清楚基本概念从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选...

    tulayang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<