微信小程序-锚点定位+内容滑动控制导航选中
之前两篇文章分别介绍了锚点定位和滑动内容影响导航选中,这里我们就结合起来,实现这两个功能!
思路不再多说,直接上干货!
WXML
<view class="navigateBox"><view class="title"><image wx:if="{{actionView=='productBox'}}" src="../images/position.png"/><view class="title {{actionView=='productBox' ? 'checked':''}}" bindtap="toViewClick" data-hash="productBox">商品</view></view><view class="title"><image wx:if="{{actionView=='commentBox'}}" src="../images/position.png"/><view class="title {{actionView=='commentBox' ? 'checked':''}}" bindtap="toViewClick" data-hash="commentBox">评价</view></view><view class="title"><image wx:if="{{actionView=='infoBox'}}" src="../images/position.png"/><view class="title {{actionView=='infoBox' ? 'checked':''}}" bindtap="toViewClick" data-hash="infoBox">详情</view></view>
</view><scroll-view style="height:{{winHeight}}" scroll-into-view="{{toView}}" scroll-y="true" bindscroll="scrollTo"><view id="productBox" class="content">商品信息...</view><view id="commentBox" class="content">评价内容...</view><view id="infoBox" class="content">商品详情...</view>
</scroll-view>
复制代码
WXS
data: {winHeight: '100%',toView: 'productBox',//锚点跳转的IDactionView: 'productBox',//控制导航显示productBoxTop: 0,//商品模块距离顶部的距离commentBoxTop: 0,//评价模块距离顶部的距离infoBoxTop: 0,//详情模块距离顶部的距离
};onLoad() {let that = this;wx.getSystemInfo({success: function (res) {//屏幕的宽度/屏幕的高度 = 微信固定宽度(750)/微信高度that.setData({winHeight = res.windowHeight-(res.windowWidth*90/750)+'px' })}});
}onShow() {// 获取各模块距离顶部的距离new Promise(resolve => {let query = wx.createSelectorQuery();query.select('#productBox').boundingClientRect();query.select('#commentBox').boundingClientRect();query.select('#infoBox').boundingClientRect();query.exec(function (res) {resolve(res);});}).then(res => {this.setData({productBoxTop: res[0].top,commentBoxTop: res[1].top,infoBoxTop: res[2].top});});
}//锚点定位
toViewClick(e) {this.setData({toView: e.target.dataset.hash, actionView: e.target.dataset.hash})
},scrollTo(e){let scrollTop = e.detail.scrollTop+100; //滚动的Y轴if(scrollTop >= this.infoBoxTop){this.setData({actionView: 'infoBox' })}else if(scrollTop >= this.commentBoxTop){this.setData({actionView: 'commentBox' })}else {this.setData({actionView: 'productBox' })}//this.$apply();//WEPY更新数据
}复制代码
WXSS
page {height: 100%;
}
.navigateBox {background: #fff;height: 80rpx;padding: 0 100rpx;margin-bottom: 10rpx;
}
.navigateBox .title {margin: 20rpx 46rpx;float: left;font-size: 27rpx;width: 60rpx;padding-left: 30rpx;
}
.navigateBox .title .right {float: right;margin-top: -5rpx;
}
.navigateBox image {width: 30rpx;height: 30rpx;margin-left: -30rpx;
}
.navigateBox .checked {color: #f73c3c;
}
.content {height: 1000rpx;
}
复制代码
微信小程序-锚点定位+内容滑动控制导航选中相关推荐
- 微信小程序-贪吃蛇开发9 滑动控制与碰撞检测
本系列是作者自学实践过程的记录 本文是关于贪吃蛇的滑动控制 有问题欢迎讨论 目录 一.滑动控制 1.1 设计思想 1.2 代码实现 1.3 效果展示: 1.4 整体赋值 二.setInterval函数 ...
- 微信小程序使用swiper制作左右滑动tabs导航
首先我们先来看一下效果吧 很简单 wxml <!-- 组合按钮导航 S --><swiper class="tabs-nav"><swiper-ite ...
- 微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
- 微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮 针对这个功能,产品的需求如下 由于我们项目是教育类产品所以这里这个功能会用在发动态这里,就像微信朋友圈那样,我们叫班级圈. 用户发班级圈时,可以 ...
- 微信小程序中嵌套html_在微信小程序中渲染HTML内容3种解决方案及分析与问题解决...
大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 在微信小程序中渲 ...
- 微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例 1
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
- php渲染页面简单例子,微信小程序如何渲染html内容(示例讲解)
本篇文章给大家带来的内容是关于微信小程序如何渲染html内容(示例讲解),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 最近又做了一个新的小程序关于物流订单查询 遇到了一个小问题:数 ...
- 微信小程序实现简单定位功能
微信小程序实现简单定位功能,简单易读,获取经纬度信息 在pages下创建一个单页如local local.js如下 var app = getApp() Page({ data:{latitude:' ...
- 微信小程序获取输入框(input)内容
微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...
最新文章
- 投资的境界:及时抓住机会或止损才是硬道理
- 基于点线特征避免单目视觉SLAM的退化
- (水题)洛谷 - P1603 - 斯诺登的密码
- 海马体what where记忆推理模型
- 怎么样用 Google Analytics 区分 Google Shopping 页的流量
- Tomcat的角色配置
- ajax传json格式数据
- Solr4:加入中文分词IKAnalyzer2012 FF
- mysql磁盘占用太大无法删除_mysql的binlog太大太多占用大量磁盘的解决
- Halcon学习笔记之OCR系列-喷码字体识别
- ubuntu通过命令行清除内存
- 计算机一级考试搜题app,计算机一级考试题库答案,哪个搜题软件能找到?
- MaxDOS V7 PXE网刻教程
- 如何查找一篇论文的实现代码从而复现论文?以及如何查找一篇论文被哪些论文引用?
- 用html打开dbf文件,dbf文件怎么打开?dbf是什么文件?
- 编码,隐匿在计算机软硬件背后的语言读书笔记(9)
- html+angularjs+redis获取后台数据模拟京东/天猫的商品分类导航
- RHCE(KVM——保存、恢复、克隆虚拟机)
- Google Hacking 搜索引擎攻击与防范
- 鸿蒙系统教程,麒麟9000+鸿蒙操作系统,华为新平板有点牛