微信小程序实现滑动翻页效果源码附效果图

如果对您有帮助，请关注我，欢迎加入微信小程序开发交流QQ群（173683866），有问题可以加群问我或者群里的大神！！！

微信小程序实现滑动翻页效果

效果图：

源码：

<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-id="{{item.id}}" catchtap="onPostTap">

          <!--<view data-detail-href="{{item.detailHref}}" 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?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;
}