服务器有了怎么做网站,外贸公司取名字大全集,静态网站制作wordpress模版,电脑做会计从业题目用什么网站背景#xff1a;当tabs下的tab切换时#xff0c;scroll-view滑动到对应的位置
注意点#xff1a;
van-tabs和scroll-view标签分开编写
van-tab的name属性代表标签名称#xff0c;作为匹配的标识符
scroll-into-view的id值必须是动态值#xff0c;即tab切换后的值
scr…背景当tabs下的tab切换时scroll-view滑动到对应的位置
注意点
van-tabs和scroll-view标签分开编写
van-tab的name属性代表标签名称作为匹配的标识符
scroll-into-view的id值必须是动态值即tab切换后的值
scroll-into-view的id不能时数字
scroll-into-view的id值应为某子元素id。如以下的view idgoods-rate
wxml:
van-tabs sticky active{{ active }} animated bind:clickclickTabvan-tab wx:for{{tabOptions}} wx:keyindex name{{item.viewId}} title{{item.title}} data-id{{item.viewId}}/van-tab
/van-tabs
scroll-view scroll-y classgoods-detail-container scroll-into-view{{viewId}} scroll-with-animation!-- 简介 --view idgoods-introduceswiper classswiper-container indicator-dots indicator-active-color#fff autoplay circularswiper-item classswiper-item wx:for{{goodsInfoList.pics}} wx:keyidimage classgoods-desc-image src{{item.pic}} modeaspectFill/image/swiper-item/swiperview classgoods-basicview classpriceview classmin-price{{basicInfo.minPrice}}/viewview classoriginal-price{{basicInfo.originalPrice}}/view/viewview classtitle{{basicInfo.name}}/viewview classcharacteristic{{basicInfo.characteristic}}/viewview classshare-desc分享有赏好友下单后可得5源现金奖励/viewview classskulist/view/view/view!-- 详情 --view idgoods-detailview classlabel-title商品详情/viewmp-html classgoods-detail-box content{{goodsInfoList.content || }} //view!-- 评价 --view idgoods-rate宝贝评价/view
/scroll-view
js:clickTab点击切换后更改动态的viewId才能正常切换
data: {// 标签切换索引active: 1,tabOptions:[// viewId用户滚动到指定位置{title:商品简介,viewId:goods-introduce},{title:商品详情,viewId:goods-detail},{title:商品评价,viewId:goods-rate},],// 标签切换idviewId: ,},
// 切换标签
clickTab(e){console.log(e,onChange);this.setData({viewId: e.detail.name});
},
