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


Posted in Javascript onDecember 06, 2019

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

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

源码:

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

总结

以上所述是小编给大家介绍的微信小程序实现滑动翻页效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript中的继承实例代码
Apr 27 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 #Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 #Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 #Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 #Javascript
vue中监听路由参数的变化及方法
Dec 06 #Javascript
详解ECMAScript2019/ES10新属性
Dec 06 #Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 #Javascript
You might like
深入了解php4(2)--重访过去
2006/10/09 PHP
一个简单的MySQL数据浏览器
2006/10/09 PHP
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
php数组使用规则分析
2015/02/27 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
php图片裁剪函数
2018/10/31 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
javascript中this关键字详解
2016/12/12 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
python获取mp3文件信息的方法
2015/06/15 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
德国电子商城:ComputerUniverse
2017/04/21 全球购物
Ref与out有什么不同
2012/11/24 面试题
会计电算化学生个人的自我评价
2014/02/08 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
工伤私了协议书范本
2014/11/24 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
复活读书笔记
2015/06/29 职场文书
基层党建工作简报
2015/07/21 职场文书
同学会演讲稿
2019/04/02 职场文书
创业计划书之校园超市
2019/09/12 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python