微信小程序点击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 相关文章推荐
javascript检查日期格式的函数[比较全]
Oct 17 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
ES6学习教程之块级作用域详解
Oct 09 Javascript
Vue.js实现立体计算器
Feb 22 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
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
python正则表达式re模块详解
2014/06/25 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
浅析Python的命名空间与作用域
2020/11/25 Python
Python实现简单的2048小游戏
2021/03/01 Python
自我鉴定总结
2014/03/24 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL