思绪
1.选项卡使用scroll-view,实现可以滑动控制效果;
2.使用current控制选项卡标题和内容的统一,实现同步操作;
3.winHeight 这个是我最常用的var calc = clientHeight * rpxR - 440; 440这个值是你所不需要计算的高度值,取决于你除内容之外的高度;
wxml文件
标题 选项1 选项2 选项卡1内容 选项卡2内容
wxss文件
.pinConDet{ padding: 30rpx; } .pinConDet .title{ color: #3491f0; font-size: 15px; height: 100rpx; line-height: 100rpx; } .pinConDet .tabBox{ border-bottom: 1px solid #3491f0; } .pinConDet .tab-item{ font-size: 15px; display:inline-block; width: 120rpx; margin-left: 20rpx; background: #e9f2fa; color: #3491f0; height: 60rpx; line-height: 60rpx; text-align: center; } .pinConDet .active{ background: #3491f0; color: #fff; } .tab-content swiper-item view{ padding: 30rpx; font-size: 15px; }
js文件
var app = getApp() Page({ data: { winHeight: "",//窗口高度 currentTab: 0, //预设当前项的值 scrollLeft: 0, //tab标题的滚动条位置 showView: false, cWayshow: false, }, // 滚动切换标签样式 switchTab: function (e) { this.setData({ currentTab: e.detail.current //获取当前事件current的值; }); this.checkCor(); }, // 点击标题切换当前页时改变样式 swichNav: function (e) { var cur = e.target.dataset.current; if (this.data.currentTaB == cur) { return false; } else { this.setData({ currentTab: cur }) } }, //判断当前滚动超过一屏时,设置tab标题滚动条。 checkCor: function () { if (this.data.currentTab > 4) { this.setData({ scrollLeft: 300 }) } else { this.setData({ scrollLeft: 0 }) } }, onLoad: function (options) { showView: (options.showView == "true" ? true : false); cWayshow: (options.showView == "true" ? true : false); var that = this; // 高度自适应 wx.getSystemInfo({ success: function (res) { var clientHeight = res.windowHeight, clientWidth = res.windowWidth, rpxR = 750 / clientWidth; console.log(clientHeight) var calc = clientHeight * rpxR - 440; console.log(calc) that.setData({ winHeight: calc }); } }); } })
最后实现效果样式呈现
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/51769.html
摘要:如果你想减少包大小,你可以这样引入事实上,每个组件都是支持单独安装的,我们也推荐你使用这种方式引入组件。以下是运行示例后各界面的截图组件图标右上角的圆形徽标数字。 1. 前言 一直以来都想做个组件库,一方面是对工作中常遇问题的总结,另一方面也确实能够提升工作效率(谁又不想造一个属于自己的轮子呢~),于是乎就有了本文的主角儿rn-components-kit。 市面上web的UI组件库如...
摘要:利用这篇教程存储一些常用的微信小程序开发技巧,方便查找。但是第一,微信小程序是国内的,有中文文档,虽然它的文档说明有点坑,但好歹有文档,阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 Hello 小伙伴们,如果觉得本文还不错,记得给个...
摘要:利用这篇教程存储一些常用的微信小程序开发技巧,方便查找。但是第一,微信小程序是国内的,有中文文档,虽然它的文档说明有点坑,但好歹有文档,阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 Hello 小伙伴们,如果觉得本文还不错,记得给个...
摘要:利用这篇教程存储一些常用的微信小程序开发技巧,方便查找。但是第一,微信小程序是国内的,有中文文档,虽然它的文档说明有点坑,但好歹有文档,阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 Hello 小伙伴们,如果觉得本文还不错,记得给个...
阅读 3695·2021-11-24 10:23
阅读 2736·2021-09-06 15:02
阅读 1252·2021-08-23 09:43
阅读 2338·2019-08-30 15:44
阅读 3025·2019-08-30 13:18
阅读 760·2019-08-23 16:56
阅读 1728·2019-08-23 16:10
阅读 513·2019-08-23 15:08