微信小程序scroll-into-view实现页面定位

1.实现效果

2.实现原理

• A页面有list，包含n条数据，跳转到B页面，带参，参数为当前数据的索引(或其他数据，唯一值即可）

• B页面，同样有n条数据，onload接参数，拿到数据的索引，得到传过来的数据

• B页面的list，用scroll-view展示，scroll-x，并设置scroll-into-view为toView，值为某子元素id（id不能以数字开头），为每条数据设置id，取值‘view{{index}}’

• B页面，根据onload拿到的索引，动态的设置toView为view+当前的index，实现页面定位

3.实现代码

A页面

<view class="card">礼品</view>
<view class="flex flex-wrap j_c">
  <block wx:for="{{4}}" wx:key="index">
    <view class="card_item" style="background: var(--va);" catchtap="toDetail" data-index="{{index}}"></view>
  </block>
</view>

page {
  background-color: #fff;
  --va:rgb(223, 177, 116);
}

.card {
  text-align: center;
  font-size: 26rpx;
  color: #333;
  padding: 20rpx;
  width: 710rpx;
  margin: 30rpx auto;
  box-sizing: border-box;
  border-radius: 20rpx;
  /* box-shadow: 5rpx 5rpx 5rpx rgb(250, 245, 245), -5rpx -5rpx 5rpx rgb(247, 243, 243); */
}

.card_item {
  width: 340rpx;
  height: 214rpx;
  margin-top: 42rpx;
  border-radius: 10px;
  background-color: pink;
  margin-right: 10rpx;
}

.card_item:nth-child(2n+2) {
  margin-right: 0;
}
.card_item:nth-child(2){
  background-color: pink!important;
}
.card_item:nth-child(3){
  background-color: rgb(121, 60, 70)!important;
}
.card_item:nth-child(4){
  background-color: rgb(202, 81, 101)!important;
}

Page({

  data: {

  },
  toDetail(e) {
    let {
      index
    } = e.currentTarget.dataset;
    console.log(index)
    wx.navigateTo({
      url: '/pages/wxCase/scrollIntoView/detail?index=' + index,
    })
  }

})

B页面

<view class="header">
  <view style="background: {{back}};" class="head_b"></view>
</view>
<view class="con">
  <view class="title">选择卡片</view>
  <scroll-view class="scroll" scroll-x="true" scroll-into-view='{{toView}}'>
    <view style="padding: 10px 0;">
      <view wx:for="{{list}}" id="view{{index}}" wx:key="index" class="card_item {{index==current&&'opcity'}}" style="background: {{item.back}};" catchtap="tap" data-index="{{index}}">
        <image src="/img/cart_select.png" wx:if="{{index==current}}" class="show_icon"></image>
      </view>
    </view>
  </scroll-view>
</view>

page {
  background-color: #fff;
}

.header {
  margin: 20rpx;
}

.head_b {
  width: 700rpx;
  height: 402rpx;
  border-radius: 20rpx;
  margin: 0 auto;
}

.con {
  margin: 20rpx;
}

.title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.scroll {
  white-space: nowrap;
  padding: 20rpx 0;
}

.card_item {
  display: inline-block;
  width: 202rpx;
  height: 132rpx;
  border-radius: 20rpx;
  margin-right: 12rpx;
  opacity: .5;
  position: relative;
}

.card_item:last-child {
  margin-right: 0;
}

.opcity {
  opacity: 1;
}

.show_icon {
  position: absolute;
  top: -11rpx;
  right: 0px;
  z-index: 1;
  width: 30rpx;
  height: 30rpx;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    back: "",
    current: "",
    list: [{
      back: 'rgb(223, 177, 116)'
    },
    {
      back: 'pink'
    },
    {
      back: 'rgb(121, 60, 70)'
    },
    {
      back: 'rgb(202, 81, 101)'
    },
    ],
    toView: "",
  },

 、、、

})

4.完整代码，关注公众号 苏苏的bug，更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！