实现原理：利用scroll-view标签，注意：scroll-into-view属性要想实现滚动需在scroll-view标签内部盒子里，即scroll-view大小可以等于屏幕的高，内容非屏幕滚动
示例：
商品详情滚动
wxml代码：
<!--pages/shopping/shopdetails/shopdetails.wxml-->
<!-- <text>商品详情l</text> -->
<view class="content">
<view class="head">
<view wx:for="{
{topdata}}" wx:key="index" class="{
{scrolltoptype==index+1?'active':''}}" data-scrotop="{
{index+1}}" bindtap="scrollEven">
<text>{
{
item}}</text>
<view class="line"></view>
</view>
</view>
<scroll-view class="scrollCSS" scroll-y bindscroll="onPageScroll" scroll-with-animation="true" scroll-into-view="{
{scrollToItem}}">
<!-- scroll-top="{
{scrollTop}}" -->
<view id="region1">
<view class="banner">
<swiper indicator-dots="true" circular="true">
<block wx:for="{
{bannerdata}}" wx:key="index">
<swiper-item>
<image src="{
{item}}"></image>
</swiper-item>
</block>
</swiper>
</view>
<view class="bann-t">
<view class="bannt-p">2678<text>积分</text></view>
<view class="bannt-p p2">支付方式<text>全积分</text></view>
</view>
<view class="stock">
<text class="ph3">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</text>
<view class="pdiv">
库存 <text>19983</text>
</view>
</view>
<view class="careful">
<image src="/img/hy_fuli.png"></image>
注意事项：积分一经兑换概不退还、商品数量有限，先到先得，兑完为止。如遇到产品质量问题，从收到商品当天起7日内联系客服更换。
</view>
</view>
<view id="region2">
<view class="reg2Tit"><text></text>
<view>商品介绍</view><text></text>
</view>
</view>
<view id="region3">
<view class="reg2Tit"><text></text>
<view>参数规格</view><text></text>
</view>
<view class="infoCss">
<text>商品概述：汤锅 奶锅</text>
<text>产品：上海</text>
<text>包装清单：1盒/24只</text>
<text>毛重：无</text>
<text>使用方法：无</text>
<text>其它说明：无</text>
<view class="bntCss" bindtap="exchangeEven">立即兑换</view>
</view>
</view>
</scroll-view>
</view>
js代码
// pages/shopping/shopdetails/shopdetails.js
Page({
/**
* 页面的初始数据
*/
data: {
shopNum: 5, //商品数量
scrollTop: 0,
scrollToItem: null,
initTop: {
}, //初始化三区域距顶距离
topdata: ["基本信息", "商品介绍", "参数规格"],
scrolltoptype: 1, //
buymask: false, //
bannerdata: ["/img/huiyuanbg1.jpg", "/img/huiyuanbg1.jpg", "/img/huiyuanbg1.jpg"],
},
scrollEven: async function (e) {
let scrotop = e.currentTarget.dataset.scrotop;
let that = this
console.log(that.data.initTop);
// this.setData({
// scrolltoptype: scrotop,
// scrollTop: 400
// })
// console.log(this.data.scrollTop);
// await wx.pageScrollTo({
// scrollTop: this.data.initTop["page" + scrotop],
// })
this.setData({
scrolltoptype: scrotop,
// scrollTop: this.data.initTop["page" + scrotop],
scrollToItem: "region" + scrotop
})
},
onPageScroll: function (e) {
let initTop = this.data.initTop;
let scrolltoptype = this.data.scrolltoptype;
if (e.detail.scrollTop + wx.getSystemInfoSync().windowHeight > e.detail.scrollHeight) {
this.setData({
scrolltoptype: 3,
})
} else if (e.detail.scrollTop < (initTop.page2 - 20) && scrolltoptype != 1) {
this.setData({
scrolltoptype: 1,
})
} else if (e.detail.scrollTop > (initTop.page2 - 20) && e.detail.scrollTop < initTop.page3 && scrolltoptype != 2) {
this.setData({
scrolltoptype: 2,
})
}
},
// 立即兑换
exchangeEven: function (e) {
this.setData({
buymask: true,
})
},
stopEven: function () {
},
delmask: function () {
this.setData({
buymask: false
})
},
jianEven: function () {
let shopNum = this.data.shopNum;
shopNum--;
if (shopNum < 1) {
shopNum = 1;
}
this.setData({
shopNum
})
},
jiaEven: function () {
let shopNum = this.data.shopNum;
shopNum++;
if (shopNum > 10) {
shopNum = 10;
}
this.setData({
shopNum
})
},
// 确认兑换
confirmEven: function () {
wx.showModal({
content: '是否确认兑换',
cancelText: '容我想想',
confirmText: '确认',
success(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
// 收货地址
goAddressEven: function () {
wx.navigateTo({
url: '/pages/shopping/address/address',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this;
// 初始化距离
for (let index = 1; index <= 3; index++) {
wx.createSelectorQuery().select("#region" + index).boundingClientRect(function (ret) {
that.data.initTop["page" + index] = ret.top - 40;
}).exec()
}
},
})
wxss：
page {
background-color: #F0F0F0;
}
.head {
height: 80rpx;
background: #f7f1ef;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
box-sizing: border-box;
padding: 0 80rpx;
color: #666666;
position: sticky;
top: 0;
z-index: 99;
}
.head .active {
color: #000;
}
.head .active .line {
width: 40rpx;
height: 4rpx;
background: #000000;
border-radius: 16rpx;
position: relative;
left: 18px;
bottom: -7px;
}
.scrollCSS {
height: calc(100vh - 80rpx);
}
.banner {
height: 670rpx;
background-color: aqua;
}
.bann-t {
box-sizing: border-box;
padding: 24rpx 30rpx;
background-color: #fff;
}
.bann-t .bannt-p {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 56rpx;
color: #FB5521;
}
.bann-t .bannt-p text {
font-size: 28rpx;
color: #000;
margin-left: 12rpx;
}
.bann-t .bannt-p.p2 {
color: #999999;
font-size: 26rpx;
}
.bann-t .bannt-p.p2 text {
width: 80rpx;
height: 28rpx;
background: #E6D1AD;
border-radius: 4rpx;
font-size: 20rpx;
line-height: 28rpx;
text-align: center;
color: #363940;
margin-left: 16rpx;
}
.stock {
height: 244rpx;
background-color: #fff;
margin-top: 20rpx;
padding: 32rpx 30rpx;
box-sizing: border-box;
}
.stock .ph3 {
width: 100%;
font-size: 32rpx;
font-weight: 600;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.stock .pdiv {
margin-top: 32rpx;
color: #999999;
font-size: 28rpx;
}
.stock .pdiv text {
color: #000000;
font-size: 28rpx;
margin-left: 80rpx;
}
.careful {
height: 114rpx;
font-size: 24rpx;
color: #999999;
line-height: 38rpx;
background-color: #fff;
margin-top: 20rpx;
padding: 32rpx 30rpx;
}
.careful image {
width: 23rpx;
height: 23rpx;
}
#region2 {
min-height: 3000rpx;
/* background-color: brown; */
margin-top: 26rpx;
}
.reg2Tit {
display: flex;
align-items: center;
justify-content: center;
color: #666666;
font-size: 24rpx;
margin: 0 26rpx 26rpx;
}
.reg2Tit view {
margin: 0 44rpx;
}
.reg2Tit text {
width: 180rpx;
height: 1px;
background: #C5C5C5;
}
.infoCss {
display: flex;
flex-direction: column;
background-color: #fff;
padding: 52rpx 30rpx;
font-size: 26rpx;
line-height: 30px;
}
.bntCss {
width: 690rpx;
height: 84rpx;
background: #363940;
border-radius: 46rpx;
line-height: 84rpx;
color: #E6D1AD;
font-size: 30rpx;
text-align: center;
margin-top: 24rpx;
}
swiper,
swiper image {
width: 100%;
height: 100%;
}