微信小程序点击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 Prototype对象
Jan 07 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 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
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
新浪的图片新闻效果
2007/01/13 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
js实现右键菜单功能
2016/11/28 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
Python编程中对文件和存储器的读写示例
2016/01/25 Python
python requests 测试代理ip是否生效
2018/07/25 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
python Pillow图像处理方法汇总
2019/10/16 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
物理系毕业生自荐信
2013/11/01 职场文书
年度考核自我鉴定
2014/02/02 职场文书
《长城》教学反思
2014/02/14 职场文书
文明寄语大全
2014/04/11 职场文书
合作经营协议书
2014/04/17 职场文书
婚前保证书
2014/04/29 职场文书
好员工观后感
2015/06/17 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js