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

完成的效果大概是这样的

实现需要组件

需要的数据

简要逻辑说明

  1. 根据数据循环出对应的索引和数据,左侧字母索引悬浮,右侧数据顺序展示
  2. 右侧数据每个view的id对应左侧的字母索引【id不能以数字开头】
  3. 点击左侧字母通过改变scroll-into-view的值就完成了。

代码片段

原文地址:https://www.cnblogs.com/jlfw/p/12708241.html

时间: 04-14

小程序根据索引滚动指定的位置的相关文章

微信小程序地图移动到指定的位置

其实很简单 控制 <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="mark

[微信小程序] 微信小程序下拉滚动选择器picker绑定数据的两种方式

微信小程序下拉滚动选择器picker绑定数据的两种方式  本地数据绑定和wx.request(OBJECT) json数据绑定 1.本地数据绑定 (对象数组) Page({ data:{ //户型 这是一个本地的对象,然后绑定到页面上 pic_array: [ { id: 13, name: '1室1厅1卫' }, { id: 14, name: '1室2厅1卫' }, { id: 15, name: '2室1厅1卫' }, { id: 16, name: '3室1厅2卫' }, { id: 1

微信小程序-scroll-view横向滚动和上拉加载

今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方. 先看最终效果. 横向滚动 1.设置滚动项display:inline-block; 2.设置滚动视图容器white-space: nowrap; 3.滚动项不要用float 为什么会有以上三点要求呢? 其实横向滚动官方文档中是没有做太多说明的,只说明需要定义scroll-view滚动方向scroll-x=true允许横向滚动,但是我在实践的时候我发现,你要横向滚动,首先你得是一排吧.所以才发现需要定义滚动项

微信小程序实现无限滚动列表(滚动新闻动态列表)

本文实例为大家分享了微信小程序实现无限滚动列表的具体代码,供大家参考,具体内容如下 实现方式是利用小程序原声组件swiper,方向设置为纵向 :vertical=‘true'设置同时显示的滑块数量:display-multiple-items=‘4'设置自动轮播:autoplay:‘true'. 话不所说,直接上代码: <!-- 底部排名 --> <view class='contentBottom'> <view class='BottomFirst'> <te

微信小程序点击滚动到指定位置

公司项目要做一个类似微信通讯录导航的效果,点击右侧字母页面滚动到相应位置. 因为微信小程序没有dom概念,所以不能使用锚点,也不能直接获取对应字母相对页面的偏移位置.此时只能使用小程序创建对象实例的API获取节点信息: let query = wx.createSelectorQuery().in(this); query.selectViewport().scrollOffset() query.select("#Nav").boundingClientRect(); query.s

微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)

最近在学小程序,在把当前画布指定区域的内容导出并生成图片保存到本地这个知识点上踩坑了. 这里用到的方法是: wx.canvasToTempFilePath(),该方法作用是把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径.(详情 看文档) 这里先来分析一下这句话:导出当前画布指定区域的内容并生成图片 .这里以画一个矩形并将该矩形保存到本地相册为例. 首先我们要做的是先在画布上画一个矩形,其次是利用 wx.canvasToTempFilePath()方法导出画布指定区域的内容,这里当

微信小程序 scroll-view 水平滚动使用

1. scroll-view水平滚动使用 1. wxml <scroll-view class="scroll-wrap" scroll-x> <view class="scroll-view-item"> <view class="scroll-img-wrap scroll-major-img-wrap"> <image src="../../images/[email protected]

微信小程序-滚动消息通知

写在前面: 微信小程序学的不太多,做了一个简单的项目,回来很快时间内把在深圳两天的房租给赚回来了. 这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置为true来实现上下滚动.  (需要注意的是:只要你的swiper存在vertical属性,无论你给值为true或者false或者不设参数值,都将实现上下滚动) wxml 1 <swiper clas

小程序横向滚动

在微信小程序应用的越来越多的今天,写小程序的程序员也越来越多了,本人也是刚写完微信小程序,在开发的时候也遇到一些坑,今天先写一下前几天刚遇到的问题: 相信在微信小程序中横向滚动应该是经常用到的,这一点在小程序的官方文档里也是写的比较清楚了,只要用scroll-view这个组件就可以做到, <view class="container"> <view class="section__title">horizontal scroll</vi