小程序TAB列表切换内容动态变化,scrollview高度根据内容动态获取
滑动tab选项卡
一、在小程序里面tab选项卡是用的是自带的swiper组件,下面直接上代码
<view class="container">
<view class="tab">
<view class="tab-list {{currentTab==0? 'active':''}}" data-current="0" bindtap='switchNav'>运动专区</view>
<view class="tab-list {{currentTab==1? 'active':''}}" data-current="1" bindtap='switchNav'>美食专区</view>
</view>
<swiper current='{{currentTab}}' class="swiper-box" duration='300' bindchange='bindChange' style="height: {{clientHeight?clientHeight+'px':'auto'}}">
<!--运动专区 -->
<swiper-item class="swiper-content">
<scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
<block wx:for="{{video}}" wx:key="video">
<!-- <template name="video-detail"> -->
<view class="video-detail-list">
<view class="original">
<text class="original-name">{{original}}</text>
<view class="original-video">
<video src="{{item.url}}"></video>
</view>
<view class="original-video-explain">
<text class="original-video-date">{{item.addtime}}</text>
<text class="original-video-name">{{item.title}}</text>
<view class="original-video-detail">
<text>{{originalContent}}</text>
</view>
</view>
</view>
</view>
</block>
</scroll-view>
</swiper-item>
<!--美食专区 -->
<swiper-item class="swiper-content">
<scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
<block wx:for="{{video}}" wx:key="video">
<view class="video-detail-list">
<view class="original">
<text class="original-name">{{original}}</text>
<view class="original-video">
<video src="{{item.url}}"></video>
</view>
<view class="original-video-explain">
<text class="original-video-date">{{item.addtime}}</text>
<text class="original-video-name">{{item.title}}</text>
<view class="original-video-detail">
<text>{{originalContent}}</text>
</view>
</view>
</view>
</view>
</block>
</scroll-view>
</swiper-item>
</swiper>
</view>
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内容的高度
})
}
})
}
})
成功后的截图
小程序TAB列表切换内容动态变化,scrollview高度根据内容动态获取的更多相关文章
- 微信小程序Tab选项卡切换大集合
代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序tab栏切换
Wxml代码:<view class="body"> <view class="nav bc_white"> <view clas ...
- 微信小程序 - tab+swiper切换(非组件)
无奈slot不支持循环,无法成为组件. 该模板适用于新闻等,点击下载示例:tabswiper
- 微信小程序--Tab栏切换的快速实现
上效果! wxss样式代码: .tabs-item.selected { color:rgba(,,,.); border-bottom:2px solid rgba(,,,.); } .tabs-i ...
- 微信小程序新闻列表功能(读取文件、template模板使用)
微信小程序新闻列表功能(读取文件.template) 不忘初心,方得始终.初心易得,始终难守. 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件 ...
- 微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...
- wepy小程序实现列表分页上拉加载(2)
第一篇:wepy小程序实现列表分页上拉加载(1) 本文接着上一篇内容: 4.优化-添加加载动画 (1)首先写加载动画的结构和样式 打开list.wpy文件 template结构代码: <temp ...
- wepy小程序实现列表分页上拉加载(1)
使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 列表页效果图: 1.新建列表页 (1)在pages里面新建一个list.wpy文件 初始代码 ...
- 微信小程序tab切换,可滑动切换,导航栏跟随滚动实现
简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...
随机推荐
- 发现Spring事务的一个实锤bug,官方还拒不承认?你来评评理...
你好呀,我是歪歪. 事情是这样的,上周我正在全神贯注的摸鱼,然后有个小伙伴给我发来微信消息,提出了自己关于事务的一个疑问,并配上两段代码: 先说结论:我认为这是 Spring 事务的一个 bug.但是 ...
- 用Assert(断言)封装异常,让代码更优雅(附项目源码)
有关Assert断言大家并不陌生,我们在做单元测试的时候,看业务事务复合预期,我们可以通过断言来校验,断言常用的方法如下: public class Assert { /** * 结果 = 预期 则正 ...
- C++雾中风景18:C++20, 从concept开始
转眼间,C++20的标准已经发布快两年了.不少C++的开源项目也已经将标准升级到最新的C++20了,笔者也开启了新标准的学习历程了.所以借这系列的博文,记录下笔者学习新标准的一些心得与吐槽~~ 作为C ...
- Kibana-CentOS7单机安装测试
一.是什么 Kibana 是为 Elasticsearch设计的开源分析和可视化平台.你可以使用 Kibana 来搜索,查看存储在 Elasticsearch 索引中的数据并与之交互.你可以很容易实现 ...
- [翻译] TensorFlow 分布式之论文篇 "Implementation of Control Flow in TensorFlow"
[翻译] TensorFlow 分布式之论文篇 "Implementation of Control Flow in TensorFlow" 目录 [翻译] TensorFlow ...
- jq集成月份插件(不要年月日,只要年月)
最近项目中报表统计需要按照月份进行统计,以前用的jq-ui的插件,里面集成的是年月日,修改了好久,觉得太过麻烦,就换了个思路,由于赶时间,所以就度娘了,找到了一个很简洁又简单的Demo,但是发现和我的 ...
- knative入门指南
尽管Knative自2018年以来一直由社区维护,但最近一直有关于该项目的传言,因为谷歌最近将Knative提交给了云原生计算基金会(CNCF),作为一个孵化项目考虑. 太酷了!但Knative到底是 ...
- Java基础——StringBuilder的添加与反转方法
StringBuilder添加与反转方法 方法 返回对象 public StringBuilder append(任意类型) 添加任意参数数据,并返回对象本身,注意:返回的是对象本身,则调用过appe ...
- nginx+keepalived 高可用方案
nginx+keepalived 高可用方案 准备工作 192.168.157.11 192.168.157.12 安装nginx 跟新yum源文件 rpm -ivh http://nginx.org ...
- [SHA2017](web) writeup
[SHA2017](web) writeup Bon Appétit (100) 打开页面查看源代码,发现如下 自然而然想到php伪协议,有个坑,看不了index.php,只能看 .htaccess ...