|
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)滑動翻頁效果，本文通過效果圖展示實(shí)例代碼講解的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下 微信小程序?qū)崿F(xiàn)滑動翻頁效果，效果圖如下所示： 源碼： <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> <!--時間--> <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;} 總結(jié) 以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)滑動翻頁效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！ |
|
|
