思绪
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 小伙伴们,如果觉得本文还不错,记得给个...
阅读 3786·2021-11-24 10:23
阅读 2820·2021-09-06 15:02
阅读 1324·2021-08-23 09:43
阅读 2395·2019-08-30 15:44
阅读 3087·2019-08-30 13:18
阅读 826·2019-08-23 16:56
阅读 1789·2019-08-23 16:10
阅读 587·2019-08-23 15:08