微信小程序点击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 相关文章推荐
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
微信小程序实现自动定位功能
Oct 31 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中关于普通表单多文件上传的处理方法
2011/03/25 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python深入学习之上下文管理器
2014/08/31 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
Django之腾讯云短信的实现
2020/06/12 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
如何写一个自定义标签
2012/12/28 面试题
校园安全广播稿
2014/02/08 职场文书
优秀语文教师事迹
2014/05/18 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
本溪关门山导游词
2015/02/09 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
奠基仪式致辞
2015/07/30 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书