摘要:樣式代碼切換導航超出自動隱藏文字隱藏后添加省略號強制不換行代碼切換導航條切換事件進入頁面顯示正在加載的圖標正在加載中獲取到數據后隱藏正在加載圖標獲取的數據截取數組下標的數據獲取系統信息設備的高度等于內容的高度成功后的截圖
滑動tab選項卡
一、在小程序里面tab選項卡是用的是自帶的swiper組件,下面直接上代碼
運動專區 美食專區 {{original}} {{item.addtime}} {{item.title}} {{originalContent}} {{original}} {{item.addtime}} {{item.title}} {{originalContent}}
ps:大家都知道小程序是不能操作DOM的,所以這里用getSystemInfo獲取設備高度,scrollview在這里是一個內嵌的框架,列表在框架內滾動,它的高度其實就是屏幕的高度,不是里邊列表項目的高度, 所以這里設置max-height等都是無效的。
樣式代碼:
.container{ width:100%; height: 100%; background:#eee; } /*tab切換導航 */ .tab{ width: 100%; color:#666666; height: 70rpx; font-size:28rpx; display: inline-block; text-align: center; background: #fff; } .tab-list{ height: 70rpx; line-height: 70rpx; width: 50%; display: inline-block; z-index: 1000; } .active{ border-bottom:4rpx solid #FD9D80; } .swiper-box{ width: 100%; max-height:9999px; display: block; } .video-detail-list{ margin-top:16rpx; width:100%; background: #fff; } .video-detail-list .original-name{ height: 80rpx; line-height: 80rpx; text-align: center; display: block; font-size:28rpx; } .original-name{ color:#999999; } .original-video{ text-align: center; } .original-video video{ width: 640rpx; } .original-video video{ border-radius:16rpx; } .original-video-explain{ width: 640rpx; margin-left:50rpx; } .original-video-date{ font-size:28rpx; color:#6C6C6C; } .original-video-date text{ display: inline-block; } .original-video-name{ text-align: center; width: 55%; margin-top:8rpx; float:right; font-size:28rpx; color:#6C6C6C; overflow: hidden; /* 超出自動隱藏 */ text-overflow:ellipsis; /* 文字隱藏后添加省略號 */ white-space:nowrap; /* 強制不換行 */ } .original-video-detail{ color:#A1A1A1; height: 30rpx; font-size:20rpx; /* margin-top:-10rpx; */ } .original-video-detail text{ width: 100%; display: -webkit-box; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp:3; overflow: hidden; text-overflow:ellipsis; color:#666; }
js代碼:
var videoUrl = "http://t.jingduhealth.com/index/xcsvideo" var app = getApp() Page({ data: { true:true, video:[], winWidth: 0, winHeight: 0, currentTab: 0, // tab切換 }, //tab導航條切換事件 bindChange:function(e){ var that = this; that.setData({ currentTab: e.detail.current }) }, switchNav:function(e){ var that = this; if (this.data.currentTab === e.target.dataset.current){ return false; }else{ that.setData({ currentTab: e.target.dataset.current }) } }, onLoad: function () { var that = this; //進入頁面顯示正在加載的圖標 wx.showToast({ title: "正在加載中...", icon: "loading", duration: 10000 }) wx.request({ url:videoUrl, data:{}, header:{ "ContentType":"application/json" }, success: function (res){ //獲取到數據后隱藏正在加載圖標 wx.hideLoading(); console.log(res.data) that.setData({ video:res.data.slice(0,2) //獲取的數據截取數組下標0-2的數據 }) } }) //獲取系統信息 wx.getSystemInfo({ success:function(res){ that.setData({ clientHeight: res.windowHeight //設備的高度等于scroll-view內容的高度 }) } }) } })成功后的截圖
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88666.html
摘要:原文鏈接相信做前端的都做過頁面錨點定位的功能,通過去設置頁面內錨點定位跳轉。本篇文章就使用來實現錨點定位的功能。寫到這里,的錨點定位成型了,在實際項目中,我們還可以使用來完成同樣的效果,后續的話會帶來這樣的文章。 原文鏈接:https://mp.weixin.qq.com/s/EYyTBtM9qCdmB9nlDEF-3w 相信做前端的都做過頁面錨點定位的功能,通過 去設置頁面內錨點定...
閱讀 1951·2021-09-07 10:24
閱讀 2087·2019-08-30 15:55
閱讀 2038·2019-08-30 15:43
閱讀 671·2019-08-29 15:25
閱讀 1046·2019-08-29 12:19
閱讀 1927·2019-08-23 18:32
閱讀 1515·2019-08-23 17:59
閱讀 947·2019-08-23 12:22