资讯专栏INFORMATION COLUMN

小程序选项卡小Demo,可滑动控制

anyway / 1380人阅读

思绪
1.选项卡使用scroll-view,实现可以滑动控制效果;
2.使用current控制选项卡标题和内容的统一,实现同步操作;
3.winHeight 这个是我最常用的var calc = clientHeight * rpxR - 440; 440这个值是你所不需要计算的高度值,取决于你除内容之外的高度;
wxml文件

</>复制代码

  1. 标题
  2. 选项1
  3. 选项2
  4. 选项卡1内容
  5. 选项卡2内容

wxss文件

</>复制代码

  1. .pinConDet{
  2. padding: 30rpx;
  3. }
  4. .pinConDet .title{
  5. color: #3491f0;
  6. font-size: 15px;
  7. height: 100rpx;
  8. line-height: 100rpx;
  9. }
  10. .pinConDet .tabBox{
  11. border-bottom: 1px solid #3491f0;
  12. }
  13. .pinConDet .tab-item{
  14. font-size: 15px;
  15. display:inline-block;
  16. width: 120rpx;
  17. margin-left: 20rpx;
  18. background: #e9f2fa;
  19. color: #3491f0;
  20. height: 60rpx;
  21. line-height: 60rpx;
  22. text-align: center;
  23. }
  24. .pinConDet .active{
  25. background: #3491f0;
  26. color: #fff;
  27. }
  28. .tab-content swiper-item view{
  29. padding: 30rpx;
  30. font-size: 15px;
  31. }

js文件

</>复制代码

  1. var app = getApp()
  2. Page({
  3. data: {
  4. winHeight: "",//窗口高度
  5. currentTab: 0, //预设当前项的值
  6. scrollLeft: 0, //tab标题的滚动条位置
  7. showView: false,
  8. cWayshow: false,
  9. },
  10. // 滚动切换标签样式
  11. switchTab: function (e) {
  12. this.setData({
  13. currentTab: e.detail.current
  14. //获取当前事件current的值;
  15. });
  16. this.checkCor();
  17. },
  18. // 点击标题切换当前页时改变样式
  19. swichNav: function (e) {
  20. var cur = e.target.dataset.current;
  21. if (this.data.currentTaB == cur) { return false; }
  22. else {
  23. this.setData({
  24. currentTab: cur
  25. })
  26. }
  27. },
  28. //判断当前滚动超过一屏时,设置tab标题滚动条。
  29. checkCor: function () {
  30. if (this.data.currentTab > 4) {
  31. this.setData({
  32. scrollLeft: 300
  33. })
  34. } else {
  35. this.setData({
  36. scrollLeft: 0
  37. })
  38. }
  39. },
  40. onLoad: function (options) {
  41. showView: (options.showView == "true" ? true : false);
  42. cWayshow: (options.showView == "true" ? true : false);
  43. var that = this;
  44. // 高度自适应
  45. wx.getSystemInfo({
  46. success: function (res) {
  47. var clientHeight = res.windowHeight,
  48. clientWidth = res.windowWidth,
  49. rpxR = 750 / clientWidth;
  50. console.log(clientHeight)
  51. var calc = clientHeight * rpxR - 440;
  52. console.log(calc)
  53. that.setData({
  54. winHeight: calc
  55. });
  56. }
  57. });
  58. }
  59. })

最后实现效果样式呈现

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51769.html

相关文章

  • 哥哥姐姐看过来,这里有个组件库需要您签收一下

    摘要:如果你想减少包大小,你可以这样引入事实上,每个组件都是支持单独安装的,我们也推荐你使用这种方式引入组件。以下是运行示例后各界面的截图组件图标右上角的圆形徽标数字。 1. 前言 一直以来都想做个组件库,一方面是对工作中常遇问题的总结,另一方面也确实能够提升工作效率(谁又不想造一个属于自己的轮子呢~),于是乎就有了本文的主角儿rn-components-kit。 市面上web的UI组件库如...

    Alan 评论0 收藏0
  • 微信程序 bug 集中营

    摘要:利用这篇教程存储一些常用的微信小程序开发技巧,方便查找。但是第一,微信小程序是国内的,有中文文档,虽然它的文档说明有点坑,但好歹有文档,阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13  Hello 小伙伴们,如果觉得本文还不错,记得给个...

    he_xd 评论0 收藏0
  • 微信程序 bug 集中营

    摘要:利用这篇教程存储一些常用的微信小程序开发技巧,方便查找。但是第一,微信小程序是国内的,有中文文档,虽然它的文档说明有点坑,但好歹有文档,阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13  Hello 小伙伴们,如果觉得本文还不错,记得给个...

    PascalXie 评论0 收藏0
  • 微信程序 bug 集中营

    摘要:利用这篇教程存储一些常用的微信小程序开发技巧,方便查找。但是第一,微信小程序是国内的,有中文文档,虽然它的文档说明有点坑,但好歹有文档,阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13  Hello 小伙伴们,如果觉得本文还不错,记得给个...

    lordharrd 评论0 收藏0

发表评论

0条评论

anyway

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<