线上点单的小程序_微信小程序完成滑动翻页效果

摘要: 手机微信微信小程序完成拖动换页实际效果(详细编码) 本文关键详细介绍了手机微信微信小程序完成拖动换页实际效果,文中根据实际效果图展现案例编码解读的十分详尽,具备一...

微信小程序实现滑动翻页效果(完整代码)       这篇文章主要介绍了微信小程序实现滑动翻页效果,本文通过效果图展示实例代码讲解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

微信小程序实现滑动翻页效果,效果图如下所示:

源码:

 view 
 swiper indicator-dots="{{indicatorDots}}" indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" 
 block wx:for="{{xinwen_list}}" wx:for-index="index" 
 swiper-item bindtap="onItemClick" 
 view 
 image src="../../image/左.png" /image 
 text 来源:{{item.copyfrom}} /text 
 image src="../../image/右.png" /image 
 /view 
 view data-id="{{item.id}}" catchtap="onPostTap" 
 !-- view data-detail-href="{{item.detailHref}}" rel="external nofollow" -- 
 !--图片-- 
 image src="{{item.images[0]}}" mode="aspectFill" /image 
 !--标题-- 
 view 
 text {{item.title}} /text 
 /view 
 !--时间-- 
 view 
 text {{item.inputtime}} /text 
 /view 
 !--描述信息-- 
 view 
 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 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;
}

总结

以上所述是小编给大家介绍的微信小程序实现滑动翻页效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:小程序开发