微信小程序横滑定位元素案例代码

js代码为

js 复制代码
Page({
  data: {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5','Item 6','Item 7','Item 8','Item 9','Item 10','Item 11','Item 12','Item 13','Item 14','Item 15','Item 16','Item 17','Item 18','Item 19','Item 20','Item 21','Item 22'],
    scrollLeft: 0,
    itemView:'item4'
  },

  onLoad: function () {
    // 在页面加载完成后,设置滚动到指定位置
    this.scrollToPosition(375); // 假设我们要滚动到375px的位置
  },

  scrollToPosition: function (position) {
    this.setData({
      scrollLeft: position
    });
  },
  aaa(e){
    this.setData({
      itemView:'item'+e.currentTarget.dataset.index
    })
  }
});

wxml代码为

js 复制代码
<!-- 根据设定的距离进行滚动 -->

<scroll-view scroll-x="true" style="white-space: nowrap;height: 200px;" scroll-left="{{scrollLeft}}">
  <view class="scroll-item" wx:for="{{items}}" wx:for-item="item" id="item{{index}}">
    {{item}}
  </view>
</scroll-view>

<!-- 根据定位的元素进行滚动,会滚动到指定元素(不带动画) -->
<scroll-view scroll-x="true" style="white-space: nowrap;height: 200px;" scroll-into-view="item4">
  <view class="scroll-item" wx:for="{{items}}" wx:for-item="item" id="item{{index}}">
    {{item}}
  </view>
</scroll-view>

<!-- 根据定位的元素进行滚动,会滚动到指定元素(带动画) -->
<scroll-view scroll-x="true" style="white-space: nowrap;height: 200px;" scroll-into-view="{{itemView}}" 	scroll-with-animation>
  <view class="scroll-item" wx:for="{{items}}" wx:for-item="item" id="item{{index}}" bind:tap="aaa" data-index="{{index}}">
    {{item}}
  </view>
</scroll-view>

<!-- 设置偏移,例如不想每次都滚动到最前面,比如会将当前选项定位到居中位置 ((小程序宽度/2) - (子元素宽度/2))/2 最后这个除以2是为了转px像素,如本案例 小程序宽度为750rpx,每个item为150rpx,因此偏移值为((750/2)-(150/2))/2 = 150  因此在本案例中是刚好居中定位的-->
<scroll-view scroll-x="true" style="white-space: nowrap;height: 200px;" scroll-into-view="{{itemView}}" 	scroll-into-view-offset="-150" 	scroll-with-animation>
  <view class="scroll-item" wx:for="{{items}}" wx:for-item="item" id="item{{index}}" bind:tap="aaa" data-index="{{index}}">
    {{item}}
  </view>
</scroll-view>

wxss代码为:

css 复制代码
.scroll-item {
  display: inline-block;
  padding: 10rpx;
  width: 150rpx;
  text-align: center;
  background-color: #f0f0f0;
  margin-right: 10rpx;
  margin-top: 300rpx;
}
scroll-view{
  width: 750rpx;
  background-color: pink;
}
相关推荐
橘猫云计算机设计3 小时前
springboot-基于Web企业短信息发送系统(源码+lw+部署文档+讲解),源码可白嫖!
java·前端·数据库·spring boot·后端·小程序·毕业设计
跨时代科技11 小时前
洗车小程序系统前端uniapp 后台thinkphp
小程序
依辰11 小时前
小程序SAAS产品定制化需求解决方案
前端·javascript·微信小程序
fakaifa13 小时前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
18538162800余。17 小时前
NFC 碰一碰实现视频源码,网页与小程序协同
小程序
换日线°1 天前
微信小程序拖拽排序有效果图
微信小程序
码起来呗1 天前
基于微信小程序的走失儿童帮助系统-项目分享
微信小程序·小程序
大樊子1 天前
微信小程序路由跳转实现详解
微信小程序·小程序
不知名工程师小茶2 天前
校园二手交易平台的小程序
小程序
@泽栖2 天前
下载HBuilder X,使用uniapp编写微信小程序
微信小程序·小程序·uni-app