資訊專欄INFORMATION COLUMN
思緒
1.選項卡使用scroll-view,實現(xiàn)可以滑動控制效果；
2.使用current控制選項卡標(biāo)題和內(nèi)容的統(tǒng)一，實現(xiàn)同步操作；
3.winHeight 這個是我最常用的var calc = clientHeight * rpxR - 440; 440這個值是你所不需要計算的高度值，取決于你除內(nèi)容之外的高度；
wxml文件
標(biāo)題 選項1 選項2 選項卡1內(nèi)容 選項卡2內(nèi)容
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, //預(yù)設(shè)當(dāng)前項的值
scrollLeft: 0, //tab標(biāo)題的滾動條位置
showView: false,
cWayshow: false,
},
// 滾動切換標(biāo)簽樣式
switchTab: function (e) {
this.setData({
currentTab: e.detail.current
//獲取當(dāng)前事件current的值；
});
this.checkCor();
},
// 點擊標(biāo)題切換當(dāng)前頁時改變樣式
swichNav: function (e) {
var cur = e.target.dataset.current;
if (this.data.currentTaB == cur) { return false; }
else {
this.setData({
currentTab: cur
})
}
},
//判斷當(dāng)前滾動超過一屏?xí)r，設(shè)置tab標(biāo)題滾動條。
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;
// 高度自適應(yīng)
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
});
}
});
}
})
最后實現(xiàn)效果樣式呈現(xiàn)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51769.html
摘要：如果你想減少包大小，你可以這樣引入事實上，每個組件都是支持單獨安裝的，我們也推薦你使用這種方式引入組件。以下是運行示例后各界面的截圖組件圖標(biāo)右上角的圓形徽標(biāo)數(shù)字。 1. 前言 一直以來都想做個組件庫，一方面是對工作中常遇問題的總結(jié)，另一方面也確實能夠提升工作效率（誰又不想造一個屬于自己的輪子呢~），于是乎就有了本文的主角兒rn-components-kit。 市面上web的UI組件庫如...
摘要：利用這篇教程存儲一些常用的微信小程序開發(fā)技巧，方便查找。但是第一，微信小程序是國內(nèi)的，有中文文檔，雖然它的文檔說明有點坑，但好歹有文檔，閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺得本文還不錯，記得給個...
摘要：利用這篇教程存儲一些常用的微信小程序開發(fā)技巧，方便查找。但是第一，微信小程序是國內(nèi)的，有中文文檔，雖然它的文檔說明有點坑，但好歹有文檔，閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺得本文還不錯，記得給個...
摘要：利用這篇教程存儲一些常用的微信小程序開發(fā)技巧，方便查找。但是第一，微信小程序是國內(nèi)的，有中文文檔，雖然它的文檔說明有點坑，但好歹有文檔，閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺得本文還不錯，記得給個...
閱讀 3737·2021-11-24 10:23
閱讀 2781·2021-09-06 15:02
閱讀 1285·2021-08-23 09:43
閱讀 2362·2019-08-30 15:44
閱讀 3058·2019-08-30 13:18
閱讀 796·2019-08-23 16:56
閱讀 1753·2019-08-23 16:10
閱讀 551·2019-08-23 15:08
