home1.wxml
<!--pages/home1/home1.wxml-->
<!--滑动导航-->
<view class="bg">
<view class="nav">
<scroll-view class="scrollview" scroll-x="true">
<view class="scrollview">
<block wx:for="{{scrollviewTitle}}" wx:key="item">
<view>
<view class="{{currentIndex==index ? 'selected' : 'normal'}}" id="{{index}}" bindtap="changeCurrentIndex">
{{item}}
</view>
</view>
</block>
</view>
</scroll-view>
</view>
</view>
<!--滑动导航对应内容页面-->
<swiper current="{{currentIndex}}" style="height:{{winHeight}}rpx">
<!--vip专享-->
<swiper-item>
<swiper-item scroll-y="true" style="{{winHeight-50}}rpx">
<include src="vip.wxml"></include>
</swiper-item>
</swiper-item>
<!--视频内容-->
<swiper-item>
<include src="video.wxml"></include>
</swiper-item>
<swiper-item>
<include src="image.wxml"></include>
</swiper-item>
<swiper-item>
<view>军事军事军事军事军事军事</view>
</swiper-item>
<swiper-item>
<view>精华精华精华精华精华精华精华</view>
</swiper-item>
<swiper-item>
<view>穿越穿越穿越穿越穿越穿越穿越</view>
</swiper-item>
<swiper-item>
<view>爆料爆料爆料爆料爆料爆料爆料</view>
</swiper-item>
</swiper>
home1.ts
Page({
/**
* 页面的初始数据
*/
data: {
scrollviewTitle:[
'Vip专享','视频','图片','军事','精华','穿越','爆料'
],
currentIndex:0,
winHeight:100,
vipTotalPages:2,
vipPages:1,
vipArray:[]
},
changeCurrentIndex:function(e){
this.setData({
currentIndex:e.currentTarget.id
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
//第一次加载vip内容时,加载第1页
this.loadVip(this.data.vipPages);
},
loadVip:function(pages){
var url="https://m2.qiushibaike.com/article/list/text?type=refresh&count=12&page="+pages;
wx.request({
url:url,
success:res=>{
console.log(res.data.items)
var vipArr=[...this.data.vipArray,...res.data.items]
this.setData({
vipArray:vipArr
})
wx.getSystemInfo({
success:(result)=>{
console.log(result.windowHeight);
this.setData({
// winHeight:result.windowHeight * (vipArr.length*9)/4
winHeight:result.windowHeight * vipArr.length * 1.8
})
},
})
this.setData({
vipPages:pages
})
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
console.log("下拉")
if(this.data.currentIndex==0){//vip
this.loadVip(this.data.vipPages+1);
}
if(this.data.currentIndex==1){//视频
}
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
console.log("上推")
if(this.data.currentIndex==0){//vip
if(this.data.vipPages>this.data.vipTotalPages){
wx.showToast({
title:"到低了不能在加载了!"
})
}else{
this.loadVip(this.data.vipPages+1);
}
}
if(this.data.currentIndex==1){//视频
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
home1.json
{
"usingComponents": {},
"enablePullDownRefresh": true
}
home1.wxss
/* pages/home1/home1.wxss */
.bg{
height: 100rpx;
display: flex;
flex-direction: row;
align-items: center;
background-color: #ffba1e;
color: #fff;
}
.nav{
width: 100%;
height:100%;
}
.scrollview{
display: flex;
margin-left: 20rpx;
height:100%;
}
.selected,.normal{
width:140rpx;
height:70rpx;
line-height: 80rpx;
text-align: center;
padding: 0 20rpx;
font-weight: bold;
color: red;
border-bottom: 5rpx solid white;
}
.normal{
color: black;
border-bottom: none;
}
.hr{
width:100%;
height:10rpx;
background-color: #ccc;
}
vip.wxml
<block wx:for="{{vipArray}}" wx:key="item">
<block>
<view class="hr"></view>
<view>
{{item.id}}
</view>
<view class="head">
<view>
<image src="{{item.user.medium}}" style="height:100rpx;width:100rpx"></image>
</view>
</view>
<view class="titel">
<view>{{item.user.login}}</view>
</view>
<view class="comtemt">
<view>{{item.content}}</view>
</view>
<view class="votes">
点赞:{{item.votes.up}}/粢:{{item.votes.down}}/评论数:{{item.comments_count}}/转发数:{{item.share_count}}
</view>
</block>
</block>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)