微信小程序scroll-into-view实现页面定位
2022-03-06 本文已影响0人
苏苏哇哈哈
1.实现效果
scrollintoview.gif
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: "",
},
、、、
})
