金狮镖局 Design By www.egabc.com
微信小程序实现滑动翻页效果,效果图如下所示:
源码:
<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="/UploadFiles/2021-04-02/左.png">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" + 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; }总结
以上所述是小编给大家介绍的微信小程序实现滑动翻页效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
金狮镖局 Design By www.egabc.com
金狮镖局
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
金狮镖局 Design By www.egabc.com
暂无微信小程序实现滑动翻页效果(完整代码)的评论...
更新日志
2024年09月25日
2024年09月25日
- 林忆莲.2019-0(2023精装版)【环球】【WAV+CUE】
- Supper.Moment.2016-The.Moment【寰亚】【FLAC分轨】
- 范莉丝.1979-送郎一朵牵牛花(LP版)【大联机构】【WAV+CUE】
- 刘宇.2024-宇宙诗人【哔哟哔哟文化】【FLAC分轨】
- 《全景声白噪音》沉浸式大自然助眠 带你听自然的声音[mp3]
- 纯音入心系列纯音乐《古筝精选 十指弹一赏心曲一心奏出世人心》1CD[MP3][582MB]
- 纯音入心系列纯音乐《古筝与现代音乐的交织》1CD[MP3][96MB]
- 王俪婷.2011-ROMANCE【华研国际】【WAV+CUE】
- 狮子合唱团.2016-LION(引进版)【华纳】【WAV+CUE】
- 范文芳.1996-FNNTASY【HYPE】【WAV+CUE】
- 纯音入心系列纯音乐《韵味古筝曲》1CD[MP3][146.2MB]
- 纯音入心系列纯音乐《古筝系列-传统乐曲》1CD[MP3][974.7MB]
- 纯音入心系列纯音乐《古筝系列-弦凝指咽声停处》1CD[MP3][656.5MB]
- 群星.1994-大烂片2辑【派森】【WAV+CUE】
- 吴倩莲.1997-望爱【EMI百代】【WAV+CUE】