1.實(shí)現(xiàn)效果

scrollintoview.gif

2.實(shí)現(xiàn)原理

• A頁面有l(wèi)ist，包含n條數(shù)據(jù)，跳轉(zhuǎn)到B頁面，帶參，參數(shù)為當(dāng)前數(shù)據(jù)的索引(或其他數(shù)據(jù)，唯一值即可）

• B頁面，同樣有n條數(shù)據(jù)，onload接參數(shù)，拿到數(shù)據(jù)的索引，得到傳過來的數(shù)據(jù)

• B頁面的list，用scroll-view展示，scroll-x，并設(shè)置scroll-into-view為toView，值為某子元素id（id不能以數(shù)字開頭），為每條數(shù)據(jù)設(shè)置id，取值‘view{{index}}’

• B頁面，根據(jù)onload拿到的索引，動態(tài)的設(shè)置toView為view+當(dāng)前的index，實(shí)現(xiàn)頁面定位

3.實(shí)現(xiàn)代碼

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({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    back: "",
    current: "",
    list: [{
      back: 'rgb(223, 177, 116)'
    },
    {
      back: 'pink'
    },
    {
      back: 'rgb(121, 60, 70)'
    },
    {
      back: 'rgb(202, 81, 101)'
    },
    ],
    toView: "",
  },

 、、、

})

4.完整代碼，關(guān)注公眾號 蘇蘇的bug，更多小程序demo，盡在蘇蘇的碼云如果對你有幫助，歡迎你的star+訂閱！