scroll-view滚动导航自动居中
=>
代码片段:https://developers.weixin.qq.com/s/2fE1QWmE7xFR (复制在微信开发者工具打开)
<!-- enable-flex: 启用 flexbox 布局。开启后,当前节点声明了 `display: flex` 就会成为 flex container,并作用于其孩子节点。 -->
<!-- scroll-with-animation: 在设置滚动条位置时使用动画过渡 --> <scroll-view class="scroll-list" scroll-x scroll-left="{{scrollLeft}}" scroll-with-animation enable-flex>
<view class="item {{listIndex==index?'chooseColor':''}}" wx:for="{{10}}" wx:key="index" bindtap="chooseList" data-index="{{index}}">
{{item}}
</view>
</scroll-view>
const app = getApp() Page({
data: {
listIndex:0, // 当前下标
scrollLeft:null, // 滑动距离
scrollViewWidth:null // scroll-view元素长度
},
onLoad() {
console.log('代码片段是一种迷你、可分享的小程序或小游戏项目,可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。可点击以下链接查看代码片段的详细文档:')
console.log('https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html') wx.createSelectorQuery().select('.scroll-list').boundingClientRect((rect)=>{
this.setData({scrollViewWidth:Math.round(rect.width)}) // scroll-view元素长度
console.log(rect)
}).exec()
},
// 点击
chooseList(e){
console.log(e)
let {index} = e.currentTarget.dataset
let {offsetLeft} = e.currentTarget
this.setData({
listIndex: index,
scrollLeft: offsetLeft - this.data.scrollViewWidth/2
})
},
})
scroll-view官方文档:
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
scroll-view滚动导航自动居中的更多相关文章
- NGUI系列教程十(Scroll View实现触摸滚动相册效果)
NGUI中提供了两种Scroll View 一种是通过手指或鼠标滑动视图时移动平面物体,另一种则是直接移动摄像机,他们各有各的好处.但是NGUI提供的Scroll View很难实现类似Android ...
- Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...
- NGUI例子Scroll View场景中item添加点击后自动滑到终点
http://blog.csdn.net/luyuncsd123/article/details/22914497 最近在做一个项目的UI,需求是1.拖动items后当永远有一个item保存在中间位置 ...
- Unity NGUI制作scroll view
unity版本:4.5 NGUI版本:3.6.5 参考链接:http://blog.csdn.net/monzart7an/article/details/23878505,作者:CSDN 冬菊子 ...
- 基于sticky组件,实现带sticky效果的tab导航和滚动导航
上文提供了一个改进版的sticky组件,并将演示效果应用到了自己的博客.有了类似sticky的这种简单组件,我们就可以在利用它开发更丰富的效果,比如本文要介绍的tab导航和滚动导航.实现简单,演示效果 ...
- Scroll View 深入
转载自:http://mobile.51cto.com/hot-430409.htm 可能你很难相信,UIScrollView和一个标准的UIView差异并不大,scroll view确实会多一些方法 ...
- 全面理解iOS开发中的Scroll View[转]
from:http://mobile.51cto.com/hot-430409.htm 可能你很难相信,UIScrollView和一个标准的UIView差异并不大,scroll view确实会多一些方 ...
- UGUI 用手柄或者键盘控制选择Scroll View中的游戏对象时,滚动条跟着移动
原预制体以及脚本的下载地址:https://download.csdn.net/download/qq_15017279/10404010 1.新建一个Scroll View,删掉横向的滚动条,并且把 ...
- xamarin.Android 实现横向滚动导航
经过一段时间的练习,自己也做了不少的demo和一些小项目,今天就把这些demo分享给大家,也当做笔记记录到自己的博客中. 这次给大家带来的是HorizontalScrollView实现横向滑动,参考博 ...
- 微信小程序 -- scroll view
效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...
随机推荐
- Websocket集群解决方案
最近在项目中在做一个消息推送的功能,比如客户下单之后通知给给对应的客户发送系统通知,这种消息推送需要使用到全双工的websocket推送消息. 所谓的全双工表示客户端和服务端都能向对方发送消息.不使用 ...
- 2.3 Goland快捷键
1 新建 Alt + Insert Alt + Enter 2 移动 Alt + 上下箭头:以函数为单位移动 Ctrl + G : 定位到行 Ctrl + W :可以选择单词继而语句继而行继而函数Ct ...
- 【云原生 · Kubernetes】runtime组件
个人名片: 因为云计算成为了监控工程师 个人博客:念舒_C.ying CSDN主页️:念舒_C.ying runtime组件 8.1 部署cri-o组件 8.2 下载二进制文件 8.3 修改配置文件 ...
- flex布局中,元素等间距设置,包括第一个元素的左边,最后一个元素的右边,也等间距
项目中很多地方会用到等间距排放的场景,使用flex 布局可以很方便的实现 .fu{ display: flex; ustify-content: space-between; } 通过上面代码,可以实 ...
- easyui combobox的级联设置
<body> <input id="title" class="easyUI-combobox" //onSelect:在该combobox被 ...
- .net如何优雅的使用EFCore
EFCore是微软官方的一款ORM框架,主要是用于实体和数据库对象之间的操作.功能非常强大,在老版本的时候叫做EF,后来.net core问世,EFCore也随之问世. 本文我们将用一个控制台项目Ho ...
- Java框架--SSM&Oracle&Maven高级
〇.内容介绍 一.MyBatis01:框架概述.环境搭建及入门案例.自定义框架 1.介绍 框架:封装细节,是开发中的解决方案 三层架构与SSM的关系 表示层web:SpringMVC框架 业务层ser ...
- 【Shell脚本案例】案例5:找出CPU/内存率占用高的进程
一.背景 找出占用高的进程 使用脚本编写找出占用CPU的进程 二.分析 1.查看进程 top 输入后按C,就可以列出 其他: ps aux 2.思路 awk进行排序,如top10 即ps aux |a ...
- 1.4 Apache Hadoop完全分布式集群搭建-hadoop-最全最完整的保姆级的java大数据学习资料
目录 1.4 Apache Hadoop 完全分布式集群搭建 1.4.1 虚拟机环境准备 1.4.2 集群规划 1.4.3 安装Hadoop 1.4.3.1 集群配置 1.4.3.1.1 HDFS集群 ...
- (数据科学学习手札147)Python GIS利器shapely全新2.0版本一览
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 大家好我是费老师,我写过很多篇介绍geopand ...