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

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

源码:

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

总结

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

(0)

相关推荐

  • 微信小程序侧边栏滑动特效(左右滑动)

    侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~~ 侧边栏特效一 先看效果: wxml: <!--page/one/index.wxml--> <view class="page"> <view class="page-bottom"> <view class="page-content"> <view class=&

  • 微信小程序 scroll-view实现锚点滑动的示例

    前言 最近开始做小程序,通读一遍文档再上手并不算难,但不得不说小程序里还是有一些坑.这里说一下如何实现页面锚点跳转,一个城市列表的效果示意图如下: 因为在微信小程序的环境中不能想在浏览器里设置标签,或者操作dom滚动,传统做法就行不通了,一切都得按小程序的文档来. 一开始我们的做法是使用boundingClientRect()方法获取每个锚点的坐标,然后再用wx.pageScrollTo()方法滑动过去.结果发现效果不是很好,因为boundingClientRect方法返回的每个点的坐标会随着屏

  • 微信小程序 页面滑动事件的实例详解

    微信小程序--页面滑动事件 wxml: <view id="id" class = "ball" bindtap = "handletap" bindtouchstart = "handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend" style = "width : 10

  • 微信小程序左右滑动的实现代码

    左滑 右滑 你不再是一个人 无论你是一个程序猿还是一个程序媛,每天干的事除了coding还是coding,代码不能解决的问题(什么问题自己心里还没点abcd数嘛),探探能帮你解决.最近网上特流行一款交友软件叫探探(据说是yp软件).作为探探曾经的一名从来只浏览图片但是没有yue过的资深玩家同时又是一位热爱前端的妹子,我决定要仿一下这个app.既然是寄几开发,那还不是寄几说了算,毫无疑问整款APP的主题风格被我改成我最爱的终极少女粉了hhh,下面让我们一起来感受下探探的魅力吧~ 项目整体效果 项目

  • 微信小程序左右滑动切换页面详解及实例代码

    微信小程序--左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X,Y坐标. touchstart在触摸开始时触发事件; touchend在触摸结束时触发事件; touchmove触摸的过程中不断激发这个事件; 这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart => touchmove=> touchmov

  • 微信小程序图片横向左右滑动案例

    本文实例为大家分享了微信小程序图片左右滑动的具体代码,供大家参考,具体内容如下 图片左右滑动效果图: wxml代码: <scroll-view scroll-x="true"> <view class="uploadWrap" scroll-x="true"> <view class="upload_Item"> <image class="upload_Item_img&q

  • 微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码

     微信小程序 滑动方式 竖向滑动: <scroll-view scroll-y="true" style="height: 200rpx;"> <view style="background: red; width: 200px; height: 100px; display: inline-block" ></view> <view style="background: green; widt

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

    微信小程序实现滑动翻页效果,效果图如下所示: 源码: <view class="mainFrame"> <swiper class="container" indicator-dots="{{indicatorDots}}" indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}" interval="{{interva

  • 微信小程序全选多选效果实现代码解析

    这篇文章主要介绍了微信小程序全选多选效果实现代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图: wxml代码: <view class="memberList"> <view class="allSelect_box" bindtap='selectAll'> <checkbox class="checkbox" checked="{{sel

  • 微信小程序支付功能 php后台对接完整代码分享

    微信小程序支付,php后台对接完整代码,全是干货呀,拿过来可以直接使用.小程序在调起微信支付之前需要5个参数,这时候就需要携带code向后台请求,然后后台根据code获取openid 再进行服务器之间的. 一.准备工作 1.小程序注册,要以公司的以身份去注册一个小程序,才有微信支付权限: 2.绑定商户号. 3.在小程序填写合法域  二.完成以上条件,你可以得到      小程序appid 小程序秘钥    这两个用于获取用户openid: 商户号id ,商户号秘钥     支付接口必须的: 三.

  • android ViewPager实现滑动翻页效果实例代码

    实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.View; public class ReadViewPager extends ViewPager { public ReadV

  • NGUI实现滑动翻页效果实例代码

    废话不多说了,直接给大家上干货了. 具体代码如下所示: using UnityEngine; using System.Collections; public class PageView : MonoBehaviour { const int ITEM_NUM = 2; //总页数 const int PAGE_WIDTH = 2048; //页宽 const float DRAG_SPEED = 0.5f; //翻页时间 const int DRAG_OFFECT = 30; //滑动的起点

  • 微信小程序实现滑动验证拼图

    本文实例为大家分享了微信小程序实现滑动验证拼图的具体代码,供大家参考,具体内容如下 效果图 .wxml <button bindtap="visidlisd">滑动验证</button> <!-- 滑动验证弹窗 --> <view class="slide_model" wx:if="{{slidebel}}">   <view>       <view class="c

  • 微信小程序实现抖音播放效果的实例代码

    最近项目要做一个类似于抖音的一个视频播放 需要小程序完成 在再次确定了需要这个需求的情况下就开始了(其实因为不是说这个功能不好做主要是但心做出来肯定不流畅 卡顿什么的 优化不好优化) 然后就开始啦 思路使用微信的 swiper 完成竖向滑动 然后分页加载首先先加载一次加载10个当滑动到第7个的时候加载下一页 (要处理自动播放的问题和加载多个有多个同时播放的问题) 效果图 代码 <swiper class="swiper" vertical='true' easing-functi

  • 微信小程序实现滑动操作代码

    前言 本文使用动画组件wx.createAnimation来实现滑动操作: 1. 左滑动显示操作项区域: 2. 点击操作项触发相应方法: 3. 右滑动和点击行收起操作项: 4. 点击"删除"并确定则删除该条数据. 最终效果如下: 实现过程 1. 文件index.wxml和index.wxss代码如下,这一块比较简单,可自行查看,不做过多分析: Tips:"详情"."取号"和"删除"点击触发使用catchtap,阻止冒泡事件向上

  • 通过滑动翻页效果实现和移动端click事件问题

    前述 本文很短~ 主要是为了总结和讲述移动端click和js事件机制导致的一个问题. (:咳咳,其实几句话就能写完的还要水一篇文章,不愧是我- 正文 最近做了一个小活动,里面要用到一个效果:滑动翻页.大概是这样的: <!-- HTML代码 --> <div class="page-container"> <div class="page" style="background: #dc3b26">1</di

随机推荐