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

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 小时前
微信小程序(下)
微信小程序·小程序
Mr.Liu63 小时前
小程序29-事件穿参-mark 自定义数据
前端·微信小程序·小程序
web_Hsir4 小时前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++
PBitW5 小时前
微信小程序 -- 原生封装table
前端·微信小程序
低代码布道师5 小时前
加油站实战小程序04今日油价
低代码·小程序
ml130185288746 小时前
DeepSeek 助力心理医生小程序赋能!心理咨询小程序 线上咨询平台搭建
java·开发语言·小程序
大叔_爱编程8 小时前
wx203基于ssm+vue+uniapp的教学辅助小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
说私域18 小时前
消费品行业创新创业中品类创新与数字化工具的融合:以开源 AI 智能客服、AI 智能名片及 S2B2C 商城小程序为例
人工智能·小程序·开源
说私域18 小时前
开源AI大模型赋能的S2B2C商业生态重构研究——基于智能名片系统的体验认知与KOC背书机制
人工智能·小程序·重构·开源