欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)滑動(dòng)翻頁效果(完整代碼)

 更新時(shí)間:2019年12月06日 14:18:03   作者:a_靖  
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)滑動(dòng)翻頁效果,本文通過效果圖展示實(shí)例代碼講解的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

微信小程序?qū)崿F(xiàn)滑動(dòng)翻頁效果,效果圖如下所示:

源碼:

<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>
     <!--標(biāo)題-->
     <view class="vol-meta-title">
      <text class="vol-number">{{item.title}}</text>
     </view>
     <!--時(shí)間-->
     <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號(hào)+ 視聽頁面',
   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;
}

總結(jié)

以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)滑動(dòng)翻頁效果,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!

相關(guān)文章

  • Javascript本地存儲(chǔ)localStorage看這一篇就夠了

    Javascript本地存儲(chǔ)localStorage看這一篇就夠了

    這篇文章主要給大家介紹了關(guān)于Javascript本地存儲(chǔ)localStorage的相關(guān)資料,localStorage會(huì)可以將第一次請(qǐng)求的數(shù)據(jù)直接存儲(chǔ)到本地,這個(gè)相當(dāng)于一個(gè)5M大小的針對(duì)于前端頁面的數(shù)據(jù)庫,需要的朋友可以參考下
    2024-07-07
  • js 剪切板應(yīng)用clipboardData詳細(xì)解析

    js 剪切板應(yīng)用clipboardData詳細(xì)解析

    本篇文章主要介紹了js剪切板應(yīng)用clipboardData。需要的朋友可以過來參考下,希望對(duì)大家有所幫助
    2013-12-12
  • JavaScript仿支付寶6位數(shù)字密碼輸入框

    JavaScript仿支付寶6位數(shù)字密碼輸入框

    最近做了一個(gè)項(xiàng)目,涉及到某寶購(gòu)物支付密碼的輸入框功能,下面小編把實(shí)現(xiàn)思路分享到腳本之家平臺(tái)供大家參考
    2016-12-12
  • 深入淺析javascript立即執(zhí)行函數(shù)

    深入淺析javascript立即執(zhí)行函數(shù)

    在Javascript中,任何function在執(zhí)行的時(shí)候都會(huì)創(chuàng)建一個(gè)執(zhí)行上下文,因?yàn)闉閒unction聲明的變量和function有可能只在該function內(nèi)部,這個(gè)上下文,在調(diào)用function的時(shí)候,提供了一種簡(jiǎn)單的方式來創(chuàng)建自由變量或私有子function。
    2015-10-10
  • js中top的作用深入剖析

    js中top的作用深入剖析

    本篇文章主要是對(duì)js中top的作用進(jìn)行了深入的介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助
    2014-03-03
  • 淺談webpack4.x 入門(一篇足矣)

    淺談webpack4.x 入門(一篇足矣)

    這篇文章主要介紹了淺談webpack4.x 入門(一篇足矣),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-09-09
  • 面試官常問之說說js中var、let、const的區(qū)別

    面試官常問之說說js中var、let、const的區(qū)別

    var、let和const都是JavaScript中用來聲明變量的關(guān)鍵字,并且let和 const關(guān)鍵字是在 ES6 中才新增的,下面這篇文章主要給大家介紹了關(guān)于var、let、const區(qū)別的相關(guān)資料,需要的朋友可以參考下
    2022-03-03
  • 基于JS實(shí)現(xiàn)蜘蛛俠動(dòng)作游戲的示例代碼

    基于JS實(shí)現(xiàn)蜘蛛俠動(dòng)作游戲的示例代碼

    這篇文章主要介紹了如何利用JavaScript實(shí)現(xiàn)簡(jiǎn)單的蜘蛛俠動(dòng)作游戲,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)JavaScript游戲開發(fā)有一定的幫助,需要的可以參考一下
    2022-06-06
  • javascript實(shí)現(xiàn)圖片自動(dòng)和可控的輪播切換特效

    javascript實(shí)現(xiàn)圖片自動(dòng)和可控的輪播切換特效

    這篇文章主要介紹了javascript實(shí)現(xiàn)圖片自動(dòng)和可控的輪播切換特效,效果非常的棒,推薦給大家,有需要的小伙伴可以參考下。
    2015-04-04
  • 如何使用js正則表達(dá)式驗(yàn)證文件夾名是否符合規(guī)范

    如何使用js正則表達(dá)式驗(yàn)證文件夾名是否符合規(guī)范

    眾所周知正則表達(dá)式非常強(qiáng)大,下面這篇文章主要給大家介紹了關(guān)于如何使用js正則表達(dá)式驗(yàn)證文件夾名是否符合規(guī)范的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-05-05

最新評(píng)論