微信小程序点击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日期相关函数总结分享

    最近写了一个倒计时程序,因为经常要在手机端访问,所以没有引用jquery,对于用习惯jquery的我还真不习惯。下面简单说明js日期相关函数,并说明实现倒计时的原理
    2013-10-10
  • JavaScript中call、apply、bind实现原理详解

    JavaScript中call、apply、bind实现原理详解

    其实在很多文章都会写call,apply,bind,但个人觉着如果不弄懂原理,是很难理解透的,所以这篇文章主要介绍了JavaScript中call、apply、bind实现原理的相关资料,需要的朋友可以参考下
    2021-06-06
  • JS遍历Json字符串中键值对先转成JSON对象再遍历

    JS遍历Json字符串中键值对先转成JSON对象再遍历

    这篇文章主要介绍了JS遍历Json字符串中键值对的方法,先将Json字符串转换成JSON对象,再进行遍历,需要的朋友可以参考下
    2014-08-08
  • JavaScript判断文件上传类型的方法

    JavaScript判断文件上传类型的方法

    这篇文章主要介绍了JavaScript判断文件上传类型的方法,可实现针对重复的内容也能触发onchange事件,需要的朋友可以参考下
    2014-09-09
  • 一文教你如何优雅的使用WebSocket

    一文教你如何优雅的使用WebSocket

    WebSocket最大特点就是服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种,下面这篇文章主要给大家介绍了关于如何优雅的使用WebSocket的相关资料,需要的朋友可以参考下
    2022-05-05
  • JavaScript变量中var,let和const的区别

    JavaScript变量中var,let和const的区别

    这篇文章主要介绍了JavaScript变量中var,let和const的区别,JavaScript中一共有3种用来声明变量的关键字,分别是var、let和const,文章通过围绕主题展开对三个关键词的详细介绍,需要的朋友可以参考一下
    2022-09-09
  • Javascript保存网页为图片借助于html2canvas库实现

    Javascript保存网页为图片借助于html2canvas库实现

    借助于html2canvas库,把网页保存为Canvas画布,再把生成的canvas保存成图片,下面的示例,大家可以看看
    2014-09-09
  • 浅析BootStrap模态框的使用(经典)

    浅析BootStrap模态框的使用(经典)

    Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的。本文给大家介绍BootStrap模态框的使用,感兴趣的朋友一起学习吧
    2016-04-04
  • js中Math之random,round,ceil,floor的用法总结

    js中Math之random,round,ceil,floor的用法总结

    本篇文章是对js中Math之random,round,ceil,floor的用法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • js检查页面上有无重复id的实现代码

    js检查页面上有无重复id的实现代码

    有时候我们需要检查一个页面上是否用重复的id,一般id都是唯一的,也方便控制,那么就可以参考下面的代码
    2013-07-07

最新评论