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

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

源码：

来源：{{item.copyfrom}}

{{item.title}}

{{item.inputtime}}

{{item.description}}

加载中...

js

var Api = require("../../utils/api.js")

var ARR_NEWS_DATA=[]

Page({

data: {

hidden: false,

xinwen_list: [],

indicatorDots: false,

autoplay: false,

interval: 2000,

indicatordots: true,

duration: 1000

},

onLoad: function () {

var that = this;

var videoUrl = Api.Url + "&isvideo=1"

Api.fetchGet(videoUrl, (err, res) => {

for (var i = 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) {

var postId = 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: 0px solid #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 {

/*parent layout and this inner padding*/

padding: 20rpx;

height: 965rpx;

border: 2px solid #ebebeb;

border-radius: 5px;

box-shadow: 5px 5px 5px #c0c0c0;

background: #fff;

margin-top: 0px;

}

.vol-swiper {

height: 100%;

}

.vol-picture {

width: 100%;

}

.vol-meta-title {

margin-top: 5px;

text-align: center;

padding: 10rpx 5rpx;

font-size: 17px;

color: #000;

font-family: 'KaiTi';

}

.vol-meta-time {

padding: 10rpx 5rpx;

font-size: 12px;

padding-right: 5px;

color: #888;

}

.vol-content {

margin-top: 15rpx;

padding: 0 5rpx;

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;

}

总结

以上所述是小编给大家介绍的微信小程序实现滑动翻页效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！