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

微信小程序开发交流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>

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;
}

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

校园跑腿微信小程序跑腿同学带直播新版源码
校园跑腿微信小程序跑腿同学带直播新版源码适用类型微信小程序测试环境:系统环境:CentOS Linux 7.6.1810 (Core).运行环境:宝塔 Linux v7.0.3(专业版).网站环 ...
毕业设计微信小程序在线免费小说系统（源码+论文）
文章目录 0 项目说明 1 系统介绍 1.1 业务层面 1.2 产品层面 1.3 技术层面 2 项目运行 3 项目截图 3.1 小程序 3.2 后台管理系统 3.3 论文概览 4 项目源码 0 项目说 ...
【毕业设计_课程设计】在线免费小说微信小程序的设计与实现（源码+论文）
文章目录 0 项目说明 1 系统介绍 1.1 业务层面 1.2 产品层面 1.3 技术层面 2 项目运行 3 项目截图 3.1 小程序 3.2 后台管理系统 3.3 论文概览 4 项目源码 0 项目说 ...
node.js基于微信小程序的校园失物招领毕业设计源码072343
微信小程序的校园失物招领系统摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的校 ...
springboot基于微信小程序的校园外卖系统毕业设计源码091024
Springboot基于微信小程序的校园外卖系统摘要随着生活质量的日益改善以及生活节奏的日益加快,人们对餐饮需求的质量以及速度也随之发生着变化.为了满足社会需求,餐饮的高质量和快节奏也渐渐使电话订 ...
【微信小程序】别踩白块源码免费分享
微信小程序"别踩白块"源码分享一.项目目录框架及配置 1.文件框架 (1)pages文件夹: (2)app.js (3)app.json (4)app.wxss (5)app.w ...
SSM+mysql+微信小程序超市外卖系统-计算机毕业设计源码97313
摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,超市外卖系统小程序被用户普遍使用,为方便用户 ...
新生报到小程序毕业设计,微信新生报到小程序系统设计与实现,微信小程序毕业设计论文怎么写毕设源码开题报告需求分析怎么做
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于微信小程序新生报到系统,前台用户使用小程序,后台管理使用基PHP+MySql的B/S架构:通过后台添加学校信息.分院信息.班级信息.老师信息 ...
我的微信小程序-微计划日程管理【源码】
下载地址: 点我下载本微信小程序的设计来源: * 想法: * 生命格子(人生格子). * 自己对计划类APP的理解. * target对应为plan.plan分解为todo等 * 应用: * 高效T ...

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

承接微信小程序开发。扫码加微信。

正文：

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

最新文章

热门文章