微信小程序?qū)崿F(xiàn)滑動(dòng)翻頁效果(完整代碼)
微信小程序?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看這一篇就夠了
這篇文章主要給大家介紹了關(guān)于Javascript本地存儲(chǔ)localStorage的相關(guān)資料,localStorage會(huì)可以將第一次請(qǐng)求的數(shù)據(jù)直接存儲(chǔ)到本地,這個(gè)相當(dāng)于一個(gè)5M大小的針對(duì)于前端頁面的數(shù)據(jù)庫,需要的朋友可以參考下2024-07-07js 剪切板應(yīng)用clipboardData詳細(xì)解析
本篇文章主要介紹了js剪切板應(yīng)用clipboardData。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12深入淺析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中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)作游戲的示例代碼
這篇文章主要介紹了如何利用JavaScript實(shí)現(xiàn)簡(jiǎn)單的蜘蛛俠動(dòng)作游戲,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)JavaScript游戲開發(fā)有一定的幫助,需要的可以參考一下2022-06-06javascript實(shí)現(xiàn)圖片自動(dòng)和可控的輪播切換特效
這篇文章主要介紹了javascript實(shí)現(xiàn)圖片自動(dòng)和可控的輪播切換特效,效果非常的棒,推薦給大家,有需要的小伙伴可以參考下。2015-04-04如何使用js正則表達(dá)式驗(yàn)證文件夾名是否符合規(guī)范
眾所周知正則表達(dá)式非常強(qiáng)大,下面這篇文章主要給大家介紹了關(guān)于如何使用js正則表達(dá)式驗(yàn)證文件夾名是否符合規(guī)范的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05