微信小程序点击item使之滚动到屏幕中间位置


Posted in Javascript onMarch 25, 2020

1.需求

微信小程序点击item使之滚动到屏幕中间位置

想做类似猫眼电影选场次会自动滚动到屏幕中间的效果

如图是最终效果 

2.分析

实现这种效果的方法有三种:

1.直接使用原生CSS+js;

2.使用swiper,一屏显示多个item,点击item会自动滚动到中间

3.使用微信的scroll-view配合JS实现

权衡了一下最终选择了第三个方案,比较是微信自带的方法,使用起来会比较流畅,swiper的话会比较臃肿,原生的话就比较麻烦,需要考虑的兼容问题比较多。

3.代码

wxml

<view class="items-box">
  <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%" bindscroll="scrollMove" scroll-left='{{scrollLeft}}' scroll-with-animation="true">
  <view class="scroll-wrapper">
   <view id="scroll-item-{{index}}" class="item-pic {{selectItemIndex==index?'on':''}}" wx:for="{{ticketDetails}}" wx:key="index" bindtap="selectItem" data-index="{{index}}" data-name="{{item.TicketTitle}}" data-ticketid='{{item.TicketId}}'>
   <image src='{{imgUrl}}{{item.TicketPostImg}}'></image>
   </view>
  </view>
  </scroll-view>
</view>
<view class="item-name" hidden="{{!selectItemName}}">{{selectItemName}}</view>

wxss

.items-box .item-pic image {
 width: 90rpx;
 height: 120rpx;
}
 
.items-box .item-pic.on image {
 width: 110rpx;
 height: 148rpx;
 border: 4rpx solid #2bb7b3;
 box-sizing: border-box;
}
 
.items-box .item-pic {
 margin: 0 20rpx;
}
.items-box .item-pic:first-child{
 padding-left: 300rpx
}
.items-box .item-pic:last-child{
 padding-right: 300rpx
}
.item-name {
 padding: 18rpx 0;
 background-color: #fff;
 font-size: 24rpx;
 font-weight: 500;
 color: #232324;
 text-align: center;
}
 
.items-box .scroll-wrapper {
 align-items: flex-end;
 padding: 32rpx 0 0 0;
}
 
.items-box .scroll-view_H {
 border: none;
 background-color: #edeff1;
}

js

data:{
 moveParams: {
  scrollLeft: 0
 }
} 
 
getRect(ele) { 
//获取点击元素的信息,ele为传入的id
 var that = this;
 //节点查询
 wx.createSelectorQuery().select(ele).boundingClientRect(function (rect) {
  console.log(rect)
  let moveParams = that.data.moveParams;
  moveParams.subLeft = rect.left;
  moveParams.subHalfWidth = rect.width / 2;
  that.moveTo();
 }).exec()
 },
 moveTo: function () {
 let subLeft = this.data.moveParams.subLeft;
 let screenHalfWidth = this.data.moveParams.screenHalfWidth;
 let subHalfWidth = this.data.moveParams.subHalfWidth;
 let scrollLeft = this.data.moveParams.scrollLeft;
 
 let distance = subLeft - screenHalfWidth + subHalfWidth;
 
 scrollLeft = scrollLeft + distance;
 
 this.setData({
  scrollLeft: scrollLeft
 })
 },
 scrollMove(e) {
 let moveParams = this.data.moveParams;
 moveParams.scrollLeft = e.detail.scrollLeft;
 this.setData({
  moveParams: moveParams
 })
 },
 //选择项目
 selectItem: function (e) {
 let ele = 'scroll-item-' + e.currentTarget.dataset.index
 this.getRect('#' + ele);
 },

首先获取屏幕的宽度,再获取点击元素的宽度,计算一下就可以获得应该滚动的距离,再更改scroll-left='{{scrollLeft}}'即可

微信获取元素宽高的方法

wx.createSelectorQuery().select(ele).boundingClientRect(function (rect) {

}).exec()

https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html

总结

到此这篇关于微信小程序点击item使之滚动到屏幕中间的文章就介绍到这了,更多相关微信小程序item滚动到屏幕中间内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
Javascript玩转继承(三)
May 08 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
vue 文件目录结构详解
Nov 24 Javascript
vue地区选择组件教程详解
May 04 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 #Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 #Javascript
安装多版本Vue-CLI的实现方法
Mar 24 #Javascript
js实现页面图片消除效果
Mar 24 #Javascript
js实现消灭星星(web简易版)
Mar 24 #Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 #Javascript
javascript实现滚动条效果
Mar 24 #Javascript
You might like
php横向重复区域显示二法
2008/09/25 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
JavaScript delete操作符应用实例
2009/01/13 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
Python标准库sched模块使用指南
2017/07/06 Python
python实现键盘控制鼠标移动
2020/11/27 Python
Django框架模板介绍
2019/01/15 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
解决c++调用python中文乱码问题
2020/07/29 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
彪马美国官网:PUMA美国
2017/03/09 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
毕业班联欢会主持词
2014/03/27 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
财务统计员岗位职责
2015/04/14 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
诉讼和解协议书
2016/03/23 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android