微信小程序点击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 图片缩放(按比例)控制代码
May 27 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
JS几个常用的函数和对象定义与用法示例
Jan 15 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 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和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
限制复选框的最大可选数
2006/07/01 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
JSONP基础知识详解
2017/03/19 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
python中字典dict常用操作方法实例总结
2015/04/04 Python
python在不同层级目录import模块的方法
2016/01/31 Python
分享vim python缩进等一些配置
2018/07/02 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
Born鞋子官网:Born Shoes
2017/04/06 全球购物
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
高分子材料个人求职信范文
2013/09/25 职场文书
《母鸡》教学反思
2014/02/25 职场文书
工作感言一句话
2015/08/01 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python