小程序实现商品详情页的tap标签与页面滚动联动效果

实现原理：利用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 = thisconsole.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%;
}

小程序实现商品详情页的tap标签与页面滚动联动效果相关推荐

微信小程序新闻列表详情页
微信小程序新闻列表详情页不忘初心,方得始终.初心易得,始终难守首先创建 post-detail 文件夹,创建四种文件. 修改 post.wxml 文件代码,给每个新闻块添加一个点击事件.并且我们要 ...
微信小程序商品详情html,微信小程序关于商品详情类的富文本解析器
微信小程序关于商品详情类的富文本解析器 2020年08月10日 | 萬仟网IT编程 | 我要评论微信小程序关于商品详情类的富文本解析器富文本的解析,在vue中有v-html解析富文本的方法,但是在微 ...
微信小程序获取上一页路由获取从哪个页面跳转进来的
微信小程序获取上一页路由获取从哪个页面跳转进来的 var pages = getCurrentPages(); let prevpage = pages[pages.length - 2];//上一 ...
axure 画小程序效果图_APP详情页如何用Axure画出来
详情页是App原型中比较复杂的页面类型,熟悉它的常用套路有助于快速画出. 之前的文章已经讲解了APP常见功能中的页面模板.下导航.上导航.列表页怎么画出来,请继续关注浪子教你画APP原型后续的其他功能 ...
商品详情页公司产品画册企业宣传页面怎么设计和制作呢？
制作精美的漂亮的电商产品详情展示页,是能让人有购买下单的欲望的,那么商品详情展示页的设计和制作就显得很关键,怎么设计和做好商品详情展示页呢,2lian3教程网分享的专业的PS美工设计制作商品详情页的教 ...
小程序微信位置详情页打开小程序
为了让用户更便捷地使用小程序的打车服务,在位置消息详情页的菜单中,新增了打车小程序入口.打开聊天中的位置消息,点击详情页右下角绿色按钮,菜单中会展示符合条件的打车小程序,用户可以直接发起目的地为该位置 ...
新闻小程序4——新闻详情页设计
参考书:微信小程序开发实战--周文洁还没有设定跳转的逻辑,只是为了设计页面,在顶栏添加编译模式,选择启动页面是detail detail.wxml文件 <!--pages/detail/det ...
微信小程序之书籍详情页
上期我们写了静态分类的普通界面了,现在我们需要写跳转进入书籍详细信息页的静态页面了. 如果你想设置顶部导航标题栏的话,可以在json里设置这样点进去的话就导航栏就会显示出书本详情的标题了. 好了,言 ...
微信小程序弹出框竖向滚动_微信小程序解决自定义弹出层滑动时下层页面滚动问题...
WXML 将整个底层页面使用 scroll-view 包裹起来,设置 scroll-y 当显示弹出层的时候为 true, 闭关弹出层的时候为 false WXSS Page 设置为绝对定位,宽高各百分 ...

小程序实现商品详情页的tap标签与页面滚动联动效果

小程序实现商品详情页的tap标签与页面滚动联动效果相关推荐

最新文章

热门文章