微信小程序开发交流qq群 173683895
承接微信小程序开发。扫码加微信。
正文：
微信小程序实现滑动翻页效果
效果图：
源码：
<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;}
