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

 更新时间:2020年03月25日 09:38:23   作者:CrazBarry  
这篇文章主要介绍了微信小程序点击item使之滚动到屏幕中间位置,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

1.需求

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

如图是最终效果 

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滚动到屏幕中间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 用js闭包的方法实现多点标注冒泡示例

    用js闭包的方法实现多点标注冒泡示例

    这篇文章主要介绍了用js闭包的方法实现多点标注冒泡,需要的朋友可以参考下
    2014-05-05
  • JavaScript实现淘宝商品图切换效果

    JavaScript实现淘宝商品图切换效果

    这篇文章主要为大家详细介绍了JavaScript实现淘宝商品图切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • asp 取文本框名称代码

    asp 取文本框名称代码

    可以批量获取文本框名称的代码
    2008-12-12
  • 清除输入框内的空格

    清除输入框内的空格

    本文主要分享了js实现清除输入框内的空格的代码,代码简单易懂,需要的朋友一起来看下吧
    2016-12-12
  • js中数组的常用方法小结

    js中数组的常用方法小结

    这篇文章主要介绍了js中数组的常用方法,结合实例形式分析了js中的常用数组方法,如push、concat、pop、splice、reverse、join等功能与用法,需要的朋友可以参考下
    2016-12-12
  • iframe高度自适应及隐藏滚动条的实例详解

    iframe高度自适应及隐藏滚动条的实例详解

    这篇文章主要介绍了iframe高度自适应及隐藏滚动条的实例详解的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-09-09
  • JavaScript导出CSV文件不完整的问题解决方法

    JavaScript导出CSV文件不完整的问题解决方法

    在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等,这些字符可能会影响CSV文件的解析,导致数据错乱,所以本文给大家介绍了如何解决JavaScript导出CSV文件不完整的问题,需要的朋友可以参考下
    2024-06-06
  • Bootstrap网页布局网格的实现

    Bootstrap网页布局网格的实现

    栅格就是网格,本文详细的介绍了Bootstrap网页布局网格的原理和实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • JavaScript实现异步任务循环顺序执行详解

    JavaScript实现异步任务循环顺序执行详解

    这篇文章主要为大家详细介绍了JavaScript中实现异步任务循环顺序执行的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2023-03-03
  • 利用hasOwnProperty给数组去重的面试题分享

    利用hasOwnProperty给数组去重的面试题分享

    obj.hasOwnProperty(attr) 判断是否是原型中的属性,false就是原型中的属性,下面这篇文章主要给大家介绍了一道利用hasOwnProperty给数组去重的面试题,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2018-11-11

最新评论