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

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

源码：

<view class="mainFrame"> <swiper class="container" indicator-dots="{{indicatorDots}}" indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  <block wx:for="{{xinwen_list}}" wx:for-index="index">   <swiper-item class="vol-swiper-item" bindtap="onItemClick">    <view class="vol-meta-title">     <image class="icon_right" src="../../image/左.png"></image>     <text class="vol-number">来源：{{item.copyfrom}}</text>     <image class="icon_left" src="../../image/右.png"></image>    </view>    <view class="vol-card" data- catchtap="onPostTap">     <!--<view data-detail-href="{{item.detailHref}}" rel="external nofollow" class="item">-->     <!--图片-->     <image class="vol-picture" src="{{item.images[0]}}" mode="aspectFill"></image>     <!--标题-->     <view class="vol-meta-title">      <text class="vol-number">{{item.title}}</text>     </view>     <!--时间-->     <view class="vol-meta-time">      <text>{{item.inputtime}}</text>     </view>     <!--描述信息-->     <view class="vol-content">      <text class="vol-content-text">{{item.description}}</text>     </view>     <!--</view>-->    </view>   </swiper-item>  </block> </swiper></view><loading hidden="{{hidden}}" bindchange="loadingChange"> 加载中...</loading>

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?brush:js;">.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;}