=>     

代码片段: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滚动导航自动居中的更多相关文章

  1. NGUI系列教程十(Scroll View实现触摸滚动相册效果)

    NGUI中提供了两种Scroll View 一种是通过手指或鼠标滑动视图时移动平面物体,另一种则是直接移动摄像机,他们各有各的好处.但是NGUI提供的Scroll View很难实现类似Android ...

  2. Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条

    本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...

  3. NGUI例子Scroll View场景中item添加点击后自动滑到终点

    http://blog.csdn.net/luyuncsd123/article/details/22914497 最近在做一个项目的UI,需求是1.拖动items后当永远有一个item保存在中间位置 ...

  4. Unity NGUI制作scroll view

    unity版本:4.5 NGUI版本:3.6.5 参考链接:http://blog.csdn.net/monzart7an/article/details/23878505,作者:CSDN 冬菊子   ...

  5. 基于sticky组件,实现带sticky效果的tab导航和滚动导航

    上文提供了一个改进版的sticky组件,并将演示效果应用到了自己的博客.有了类似sticky的这种简单组件,我们就可以在利用它开发更丰富的效果,比如本文要介绍的tab导航和滚动导航.实现简单,演示效果 ...

  6. Scroll View 深入

    转载自:http://mobile.51cto.com/hot-430409.htm 可能你很难相信,UIScrollView和一个标准的UIView差异并不大,scroll view确实会多一些方法 ...

  7. 全面理解iOS开发中的Scroll View[转]

    from:http://mobile.51cto.com/hot-430409.htm 可能你很难相信,UIScrollView和一个标准的UIView差异并不大,scroll view确实会多一些方 ...

  8. UGUI 用手柄或者键盘控制选择Scroll View中的游戏对象时,滚动条跟着移动

    原预制体以及脚本的下载地址:https://download.csdn.net/download/qq_15017279/10404010 1.新建一个Scroll View,删掉横向的滚动条,并且把 ...

  9. xamarin.Android 实现横向滚动导航

    经过一段时间的练习,自己也做了不少的demo和一些小项目,今天就把这些demo分享给大家,也当做笔记记录到自己的博客中. 这次给大家带来的是HorizontalScrollView实现横向滑动,参考博 ...

  10. 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...

随机推荐

  1. Go语言核心36讲02

    你好,我是郝林,今天我分享的主题是,学习专栏的正确姿势. 到了这里,专栏的全部内容已经都推送到你的面前了.如果你已经同步学习完了,那么我要给你点一个大大的赞! 还没有看完的同学也不要着急,因为推送的速 ...

  2. 关于 python 中比较运算的顺序

    先来看一个例子: "x" > "y" == True 结果为 False 因为这里的表达式可以等同于 "x" > "y ...

  3. 关于Wegame页面空白的问题解决

    前言 前几天帮亲戚家装电脑系统,装好后发现 wegame 所有页面都不能正确加载(全部是空白页面),很神奇,在网上找了很多种解决办法都没有效果,后来不过细心的我发现360浏览器一直提示我证书不安全过期 ...

  4. 喜欢用Map却从未遭遇内存泄露的Java程序员上辈子都是神仙

    前言 点进来这篇文章的大概有两种人,一种是喜欢用Map的想看看自己是不是有可能也会踩雷,一种是不喜欢用Map的想进来看看那些喜欢用的人是怎么踩雷的. 那你要失望了,我只是单纯把公司最近代码审查时一个关 ...

  5. k8s-学习笔记总结(从入门到放弃的学习路线)

    刚入门学习k8s,我觉得挺难的,一头雾水,买了一本<Kubernetes权威指南>,真的很厚.我觉得作为应用开发人员的学习路线,不要想着一口气看完k8s的所有概念,要逐步学习,要看完这么厚 ...

  6. 实时采集MySQL数据之轻量工具Maxwell实操

    @ 目录 概述 定义 原理 Binlog说明 Maxwell和Canal的区别 部署 安装 MySQL准备 初始化Maxwell元数据库 Maxwell进程启动 命令行参数 配置文件 实时监控Mysq ...

  7. 过debugger的几种方法+案例

    受益匪浅 https://mp.weixin.qq.com/s/559so0RheeiQdA670J23yghttps://blog.csdn.net/weixin_43834227/article/ ...

  8. 【机器学习】李宏毅——Domain Adaptation(领域自适应)

    在前面介绍的模型中,一般我们都会假设训练资料和测试资料符合相同的分布,这样模型才能够有较好的效果.而如果训练资料和测试资料是来自于不同的分布,这样就会让模型在测试集上的效果很差,这种问题称为Domai ...

  9. toastr.js 便捷弹框怎么用?怎么本地化?

    〇.简介 toastr.js 是一个非常简洁的弹窗消息插件,主要原因就是其脚本和样式文件较小. 并且可以根据自己的需求,修改样式文件,可以应用在多种不同的场景. https://codeseven.g ...

  10. 使用Python库pyqt5制作TXT阅读器(一)-------UI设计

    项目地址:https://github.com/pikeduo/TXTReader PyQt5中文手册:https://maicss.gitbook.io/pyqt-chinese-tutoral/p ...