微客导航 » 文章资讯 » 微信小程序实现滑动翻页效果(完整代码)

微信小程序实现滑动翻页效果(完整代码)

2023-08-04 22:17:04 162

微信小程序实现滑动翻页效果，效果图如下所示：

源码：







来源：{{item.copyfrom}}








{{item.title}}



{{item.inputtime}}



{{item.description}}








加载中...

varApi=require("../../utils/api.js")
varARR_NEWS_DATA=[]
Page({
data:{
hidden:false,
xinwen_list:[],
indicatorDots:false,
autoplay:false,
interval:2000,
indicatordots:true,
duration:1000
},
onLoad:function(){
varthat=this;
varvideoUrl=Api.Url+"&isvideo=1"
Api.fetchGet(videoUrl,(err,res)=>{
for(vari=0;i<14;i++){
res.data[i].inputtime=Api.js_date_time(res.data[i].inputtime)
ARR_NEWS_DATA.push(res.data[i])
}
that.setData({
hidden:true,
xinwen_list:ARR_NEWS_DATA,
})
})
},
onPostTap:function(event){
varpostId=event.currentTarget.dataset.id;
wx.navigateTo({
url:"../video/video-listdetails?id="+postId
})
},
onShareAppMessage:function(){
return{
title:'柳州1号+视听页面',
path:'pages/video/video'
}
}
})

css

.mainFrame{
margin-top:0rpx;
height:100%;
display:flex;
flex-direction:column;
border:0pxsolid#ebebeb;
}
.container{
height:1135rpx;
padding-top:0px;
background:#b3d4db
}
.icon_right{
height:30px;
width:30px;
padding-right:60rpx;
}
.icon_left{
height:30px;
width:30px;
padding-left:60rpx;
}
.vol-swiper-item{
box-sizing:border-box;
padding-left:30rpx;
padding-right:30rpx;
}
.title{
display:block;
width:100%;
height:50px;
color:#f00;
}
.time{
font-size:22rpx;
text-align:right;
color:#ccc;
}
.vol-card{
/*parentlayoutandthisinnerpadding*/
padding:20rpx;
height:965rpx;
border:2pxsolid#ebebeb;
border-radius:5px;
box-shadow:5px5px5px#c0c0c0;
background:#fff;
margin-top:0px;
}
.vol-swiper{
height:100%;
}
.vol-picture{
width:100%;
}
.vol-meta-title{
margin-top:5px;
text-align:center;
padding:10rpx5rpx;
font-size:17px;
color:#000;
font-family:'KaiTi';
}
.vol-meta-time{
padding:10rpx5rpx;
font-size:12px;
padding-right:5px;
color:#888;
}
.vol-content{
margin-top:15rpx;
padding:05rpx;
font-size:14px;
line-height:1.4;
font-family:'KaiTi';
color:#9c9c9c;
}
.vol-content-text{
margin-top:5px;
width:100%;
min-height:200rpx;
display:inline-block;
text-indent:2em;
}
.vol-makettime{
font-size:13px;
color:#888;
text-align:right;
}

总结

以上所述是小编给大家介绍的微信小程序实现滑动翻页效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

微信小程序实现滑动翻页效果(完整代码)

热门推荐

随机推荐