微信小程序实现滑动翻页效果,附源码-微信小程序开发教程-微信小程序,小程序,小程序开发,微信小程序开发,微信小程序社区,微信开发者平台 - 葡京娱乐网址
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序实现滑动翻页效果,附源码

[复制链接]
查看: 389|回复: 0
最佳答案
0 

3

主题

13

帖子

120

积分

新人求带

积分
120
本帖最后由 ewull 于 2018-6-13 17:29 编辑

微信小程序实现滑动翻页效果

效果图:
20180613113510570.gif

源码:
  1. <view class="mainFrame">  
  2.   <swiper class="container" indicator-dots="{{indicatorDots}}" indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  
  3.     <block wx:for="{{xinwen_list}}" wx:for-index="index">  
  4.       <swiper-item class="vol-swiper-item" bindtap="onItemClick">  
  5.         <view class="vol-meta-title">  
  6.           <image class="icon_right" src="../../image/左.png"></image>  
  7.           <text class="vol-number">来源:{{item.copyfrom}}</text>  
  8.           <image class="icon_left" src="../../image/右.png"></image>  
  9.         </view>  
  10.         <view class="vol-card" data-id="{{item.id}}" catchtap="onPostTap">  
  11.   
  12.           <!--<view data-detail-href="{{item.detailHref}}" class="item">-->  
  13.   
  14.           <!--图片-->  
  15.           <image class="vol-picture" src="{{item.images[0]}}" mode="aspectFill"></image>  
  16.   
  17.           <!--标题-->  
  18.           <view class="vol-meta-title">  
  19.             <text class="vol-number">{{item.title}}</text>  
  20.           </view>  
  21.   
  22.           <!--时间-->  
  23.           <view class="vol-meta-time">  
  24.             <text>{{item.inputtime}}</text>  
  25.           </view>  
  26.   
  27.           <!--描述信息-->  
  28.           <view class="vol-content">  
  29.             <text class="vol-content-text">{{item.description}}</text>  
  30.           </view>  
  31.   
  32.           <!--</view>-->  
  33.         </view>  
  34.       </swiper-item>  
  35.     </block>  
  36.   </swiper>  
  37. </view>  
  38. <loading hidden="{{hidden}}" bindchange="loadingChange">  
  39.   加载中...  
  40. </loading>  
复制葡京赌场网站

js
  1. var Api = require("../../utils/api.js")  
  2. var ARR_NEWS_DATA=[]  
  3. Page({  
  4.   data: {  
  5.     hidden: false,  
  6.     xinwen_list: [],  
  7.     indicatorDots: false,  
  8.     autoplay: false,  
  9.     interval: 2000,  
  10.     indicatordots: true,  
  11.     duration: 1000  
  12.   },  
  13.   
  14.   onLoad: function () {  
  15.     var that = this;  
  16.     var videoUrl = Api.Url + "&isvideo=1"  
  17.     Api.fetchGet(videoUrl, (err, res) => {  
  18.       for (var i = 0; i < 14; i++) {  
  19.         res.data[i].inputtime = Api.js_date_time(res.data[i].inputtime)  
  20.         ARR_NEWS_DATA.push(res.data[i])  
  21.       }  
  22.       that.setData({  
  23.         hidden: true,  
  24.         xinwen_list: ARR_NEWS_DATA,  
  25.       })  
  26.     })  
  27.   },  
  28.   onPostTap: function (event) {  
  29.     var postId = event.currentTarget.dataset.id;  
  30.     wx.navigateTo({  
  31.       url: "../video/video-listdetails?id=" + postId  
  32.     })  
  33.   },  
  34.   onShareAppMessage: function () {  
  35.     return {  
  36.       title: '柳州1号+ 视听页面',  
  37.       path: 'pages/video/video'  
  38.     }  
  39.   }  
  40. })
复制葡京赌场网站

css
  1. .mainFrame {  
  2.   margin-top: 0rpx;  
  3.   height: 100%;  
  4.   display: flex;  
  5.   flex-direction: column;  
  6.   border: 0px solid #ebebeb;  
  7.    
  8. }  
  9.   
  10. .container {  
  11. height: 1135rpx;  
  12.   padding-top: 0px;  
  13. background: #b3d4db  
  14. }  
  15.   
  16. .icon_right{  
  17.   height: 30px;  
  18.   width: 30px;  
  19.    padding-right: 60rpx;  
  20.    
  21. }  
  22. .icon_left{  
  23.     height: 30px;  
  24.   width: 30px;  
  25.     padding-left: 60rpx;  
  26. }  
  27. .vol-swiper-item {  
  28.   
  29.   box-sizing: border-box;  
  30.   padding-left: 30rpx;  
  31.   padding-right: 30rpx;  
  32. }  
  33.   
  34. .title {  
  35.   
  36.   display: block;  
  37.   width: 100%;  
  38.   height: 50px;  
  39.   color: #f00;  
  40. }  
  41.   
  42. .time {  
  43.   font-size: 22rpx;  
  44.   text-align: right;  
  45.   color: #ccc;  
  46. }  
  47.   
  48. .vol-card {  
  49.   /*parent layout  and  this inner padding*/  
  50.   padding: 20rpx;  
  51.   height: 965rpx;  
  52.   border: 2px solid #ebebeb;  
  53.   border-radius: 5px;  
  54.   box-shadow: 5px 5px 5px #c0c0c0;  
  55.   background: #fff;  
  56.   margin-top: 0px;  
  57. }  
  58. .vol-swiper {  
  59.   height: 100%;  
  60. }  
  61.   
  62. .vol-picture {  
  63.   width: 100%;  
  64. }  
  65. .vol-meta-title {  
  66.   margin-top: 5px;  
  67.   text-align: center;  
  68.   padding: 10rpx 5rpx;  
  69.   font-size: 17px;  
  70.   color: #000;  
  71.   font-family: 'KaiTi';  
  72. }  
  73.   
  74. .vol-meta-time {  
  75.   padding: 10rpx 5rpx;  
  76.   font-size: 12px;  
  77.   padding-right: 5px;  
  78.   color: #888;  
  79. }  
  80.   
  81.   
  82. .vol-content {  
  83.   margin-top: 15rpx;  
  84.   padding: 0 5rpx;  
  85.   font-size: 14px;  
  86.   line-height: 1.4;  
  87.   font-family: 'KaiTi';  
  88.   color: #9c9c9c;  
  89. }  
  90.   
  91. .vol-content-text {  
  92.   margin-top: 5px;  
  93.   width: 100%;  
  94.   min-height: 200rpx;  
  95.   display: inline-block;  
  96.   text-indent: 2em;  
  97. }  
  98.   
  99. .vol-makettime {  
  100.   font-size: 13px;  
  101.   color: #888;  
  102.   text-align: right;  
  103. }  
复制葡京赌场网站

原文:https://blog.csdn.net/qq_35713752/article/details/80676764
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.mainetimberworks.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信葡京娱乐网址号

市场合作
[email protected]