怎么在微信小程序中实现一个滑动翻页效果

  介绍

这篇文章将为大家详细讲解有关怎么在微信小程序中实现一个滑动翻页效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

& lt; view 类=癿ainFrame"比;   ,& lt; swiper 类=癱ontainer", indicator-dots=皗{indicatorDots}}“, indicator-dots=皗{indicatorDots}}“,播放=皗{播放}}“,间隔=皗{间隔}}“,时间=皗{时间}}“比;   & lt;才能block 天气:为=皗{xinwen_list}},,天气:对于指数=癷ndex"比;   ,,& lt; swiper-item 类=皏ol-swiper-item", bindtap=皁nItemClick"比;   ,,,& lt; view 类=皏ol-meta-title"比;   ,,,,& lt; image 类=癷con_right", src=https://www.yisu.com/zixun/image/左. png ">   <文本类=" vol-number "> {{item.copyfrom}}      <视图类=" vol-card "数据id="{{项目。id}} onPostTap“catchtap=>    - ->      <图象类=" vol-picture " src="{{项目。图像[0]}}”模式=" aspectFill ">      <视图类=" vol-meta-title ">   <文本类=" vol-number "> {{item.title}}         <视图类=" vol-meta-time ">   <文本> {{item.inputtime}}         <视图类=" vol-content ">   <文本类=" vol-content-text "> {{item.description}}               块         <加载隐藏="{{隐藏}}”bindchange=" loadingChange ">   加载中...   

js

var  Api =,需要(“. ./. ./跑龙套/api.js")   var  ARR_NEWS_DATA=[]   页面({   ,数据:{   隐藏的才能:假的,   ,,xinwen_list: [],   ,,indicatorDots:假的,   ,,播放:假的,   2000年,间隔:大敌;   indicatordots才能:,真的,   ,时间:1000年,   },   ,onLoad: function  (), {   var 才能;that =,;   var 才能;videoUrl =, Api.Url  +,“和isvideo=1,   Api.fetchGet才能(videoUrl,(呃,,res),=祝辞,{   ,,for  (var 小姐:=,0;,小姐:& lt;, 14;,我+ +),{   ,,,res.data[我].inputtime =, Api.js_date_time (res.data[我].inputtime)   ,,,ARR_NEWS_DATA.push (res.data[我])   ,,}   ,,that.setData ({   隐藏,,,,,真的,   ,,,xinwen_list:, ARR_NEWS_DATA,   ,,})   })才能   },   ,onPostTap: function (事件),{   var 才能;postId =, event.currentTarget.dataset.id;   wx.navigateTo({才能   ,,,url:“. ./视频/video-listdetails ? id=? + postId   })才能   },   ,onShareAppMessage: function  (), {   return {才能   ,,,标题:& # 39;柳州1号+,视听页面& # 39;,   ,,,路径:& # 39;网页/视频/视频# 39;   ,,}   ,}   css})


.mainFrame  {   ,margin-top: 0 rpx;   ,高度:100%;   ,显示:flex;   ,flex-direction:列;   ,边界:0 px  solid  # ebebeb;   }   .container  {   身高:1135 rpx;   ,padding-top: 0 px;   背景:# b3d4db   }   .icon_right {   ,高度:30 px;   ,宽度:30 px;   ,,padding-right: 60 rpx;   }   .icon_left {   ,,身高:30 px;   ,宽度:30 px;   ,,padding-left: 60 rpx;   }   .vol-swiper-item  {   ,box-sizing: border-box;   ,padding-left: 30 rpx;   ,padding-right: 30 rpx;   }   .title  {   ,显示:块;   ,宽度:100%;   ,高度:50 px;   ,颜色:# f00;   }   .time  {   ,字体大小:22 rpx;   ,text-align:正确的;   ,颜色:# ccc;   }   .vol-card  {   ,/* parent  layout 以及却;能够inner 填充*/,填充:20 rpx;   ,身高:965 rpx;   ,边界:2 px  solid  # ebebeb;   ,这个特性:5 px;   ,不必:5 px  5 px  5 px  # c0c0c0;   ,背景:# fff;   ,margin-top: 0 px;   }   .vol-swiper  {   ,高度:100%;   }   .vol-picture  {   ,宽度:100%;   }   .vol-meta-title  {   ,margin-top: 5 px;   ,text-align:中心;   ,填充:10 rpx  5 rpx;   ,字体大小:17 px;   ,颜色:# 000;   ,字体类型:& # 39;KaiTi& # 39;;   }   .vol-meta-time  {   ,填充:10 rpx  5 rpx;   ,字体大小:12 px;   ,padding-right: 5 px;   ,颜色:# 888;   }   .vol-content  {   ,margin-top: 15 rpx;   ,填充:0,5 rpx;   ,字体大小:14 px;   ,行高:1.4;   ,字体类型:& # 39;KaiTi& # 39;;   ,颜色:# 9 c9c9c;   }   .vol-content-text  {   ,margin-top: 5 px;   ,宽度:100%;   null   null   null   null   null   null   null   null   null

怎么在微信小程序中实现一个滑动翻页效果