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


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 相关文章推荐
jQuery AjaxQueue改进步骤
Oct 06 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 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
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
详解ES6中的let命令
2020/04/05 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
生物技术专业毕业生求职信范文
2013/12/14 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
校园之声广播稿
2014/01/31 职场文书
八一建军节活动方案
2014/02/10 职场文书
入学申请自荐信范文
2014/02/26 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
职务任命书范本
2014/06/05 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书