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


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 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
js中的json对象详细介绍
Oct 29 Javascript
JS表的模拟方法
Feb 05 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 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入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
JS常见构造模式实例对比分析
2018/08/27 Javascript
jQuery实现日历效果
2020/09/11 jQuery
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
python一键升级所有pip package的方法
2017/01/16 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
大学生求职自我评价
2014/01/16 职场文书
个人贷款担保书
2014/04/01 职场文书
绿色环保口号
2014/06/12 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
Python制作表白爱心合集
2022/01/22 Python
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL