微信小程序-锚点定位
发布时间:2020-12-14 19:24:52 所属栏目:资源 来源:网络整理
导读:引言:在商品详情页面,一般会有商品图显示、商品主要信息、评价、商品详情等,这时候最好是在最上面加上导航,点击导航定位到对应的页面位置,比如京东的商品详情页面 对于一般的PC端网页,只需要使用? a href="#element_Id" ?,然后在地址栏最后加上#eleme
引言:在商品详情页面,一般会有商品图显示、商品主要信息、评价、商品详情等,这时候最好是在最上面加上导航,点击导航定位到对应的页面位置,比如京东的商品详情页面 对于一般的PC端网页,只需要使用? 那么,微信小程序该怎样解决呢? 解决思路查找微信小程序的开发文档,发现可以使用scroll-view组件中的属性scroll-into-view实现 重点
注意:第4、5步不能换位置,一定是scroll-into-view在scroll-y的前面 上代码WXNL<view class="navigateBox">
<view @tap="toViewClick" data-hash="productBox" class="title {{toView=='productBox' ? 'checked':''}}">
<image wx:if="{{toView=='productBox'}}" src="../images/position.jpg"/>商品</view>
<"commentBox" class={{toView=='commentBox' ? 'checked':''}{{toView=='commentBox'}"../images/position.jpg"/>评价</"infoBox" class={{toView=='infoBox' ? 'checked':''}{{toView=='infoBox'}"../images/position.jpg"/>详情</view>
</view>
<scroll-view style="height:{{winHeight}}" scroll-into-view={{toView}}" scroll-y="true">
<view id="productBox">商品图</"commentBox">商品评价</"infoBox">商品详情</scroll-view>
复制代码
JSdata = {
winHeight: '100%',toView: 'productBox',//锚点跳转的ID
}
onLoad(){
let that = this;
wx.getSystemInfo({
success: function (res) {
//屏幕的宽度/屏幕的高度 = 微信固定宽度(750)/微信高度
that.winHeight = res.windowHeight-(res.windowWidth*90/750)+'px';//90为导航的告诉80+10(margin-bottom)
}
});
}
methods = {
toViewClick: function (e) {
this.toView = e.target.dataset.hash;
}
}
复制代码
WXSS<style lang="less">
page{
height: 100%;
}
.navigateBox{
background: #fff;
height: 80rpx;
padding: 0 100rpx;
margin-bottom: 10rpx;
.title{
margin: 20rpx 46rpx;
float: left;
font-size: 27rpx;
width: 60rpx;
padding-left: 30rpx;
}
image{
width: 30rpx;
height: 30rpx;
margin-left: -30rpx;
}
.checked{
color: #f73c3c;
}
}
复制代码 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |