首页 > 小程序教程 > 微信小程序移动互联网开发案例列表展示页面制作设计教程下载

微信小程序移动互联网开发案例列表展示页面制作设计教程下载

上一篇 下一篇
本文给大家带来的是微信微信小程序移动互联网开发案例列表展示页面制作设计教程,制作好以后效果图如下:
一、wxml页面代码如下:
<import src="../../common/tpl/banner-swiper.wxml"/>
<view>
    <template is="bannerSwiper" data="{{...bannerSwiperConfig}}"/>
    <view class="case-list">
        <view class="case-item" wx:for="{{caseList}}">
            <image src="{{item.img}}" mode="widthFix"></image>
            <view class="case-title"><text>{{item.title}}</text></view>
        </view>
    </view>
    <view class="tips"><text>查看更多案例详情,请浏览我们的官网(<text selectable="{{true}}">www.gzyueyun.com</text>)</text></view>
    <view class="footer">
        <navigator class="dz-btn" url="../dingzhi/dingzhi">立即定制</navigator>
    </view>
</view>
 
二、wxss样式文件代码如下:
.case-list {
    padding: 20rpx 30rpx;
}

.case-item image {
    width: 100%;
}

.case-item .case-title {
    text-align: center;
    line-height: 80rpx;
    font-size: 42rpx;
}

.tips {
    font-size: 32rpx;
    color: #909090;
    text-align: center;
}

.footer {
    margin: 30rpx 0;
    padding: 0 84rpx;
}
三、js页面代码如下:
var api = require('../../assets/js/api.js');
Page({
    data: {
        bannerSwiperConfig: getApp().globalData.bannerSwiperConfig,
        caseList: [
            // {
            //     img: "http://www.gzyueyun.com/m/yueyun-mini-app/assets/img/case_cover_01.png",
            //     title: "格局"
            // },
            // {
            //     img: "http://www.gzyueyun.com/m/yueyun-mini-app/assets/img/case_cover_02.png",
            //     title: "3M空气检测"
            // }
        ]
    },
    onLoad: function () {
        getApp().getBannerList(this);
        this.getCaseList();
    },
    getCaseList: function () {
        var $this = this;
        wx.showLoading({
            title: "加载中",
            mask: true,
            success: function () {
                wx.request({
                    url: api.apiPath.getCaseList,
                    data: {
                        page: 1,
                        size: 5
                    },
                    method: 'GET',
                    success: function (res) {
                        var success = res.data.success,
                            list = res.data.root;
                        if (success) {
                            var arr = [];
                            for (var i = 0, len = list.length; i < len; i++) {
                                var item = list[i];
                                arr.push({
                                    img: api.getImgFullPath(item['image']),
                                    title: item['innerTitle']
                                });
                            }
                            $this.setData({
                                "caseList": arr
                            });
                        }
                    },
                    fail: function (res) {
                        console.error("get case list error!");
                    },
                    complete: function() {
                        wx.hideLoading();
                    }
                });
            }
        });
    }
});

模板简介:该模板名称为【微信小程序移动互联网开发案例列表展示页面制作设计教程下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 16,878次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-26
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信文章 Bootstrap 表格式简历模板 单页式简历模板 微信模板 响应式 自适应 企业网站 html5 微信公众平台
您可能会喜欢的其他模板