首页 > 小程序教程 > 微信小程序花王纸尿裤商品详情页面设计制作开发教程

微信小程序花王纸尿裤商品详情页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序花王纸尿裤商品详情页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="container">
    
    <view>
        <swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
                autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
            <block wx:for="{{goodsPicsInfo}}">
                <swiper-item>
                    <image src="{{item.picurl}}" class="slide-image"/>
                </swiper-item>
            </block>
        </swiper>
    </view>

    <view class="shopping_container">
        <view class="title">{{shopppingDetails.title}}</view>
        <view class="reason">{{shopppingDetails.reason}}</view>
    </view>

    <view>
        <view></view>
    </view>

</view>
 
二、wxss样式文件代码如下:
page{
    background-color: #fff;
    font-size: 14px;
}
.swiper_box {
    width: 100%;
    height: 320px;
}
.swiper_box .slide-image{
    width: 100%;
    height: 100%;
    display: inline-block;
    overflow: hidden;
}
.shopping_container{
    padding: 0 30rpx;
}
.shopping_container .title{
    margin: 20rpx 0;
    font-weight: bold;
    color: #333;
}

.shopping_container .reason{
    margin: 20rpx 0;
    color: #939393;
    line-height: 22px;
}
三、js页面代码如下:
var app = getApp()
Page({
    data: {
        indicatorDots: true,
        vertical: false,
        autoplay: true,
        interval: 3000,
        duration: 1200,
        shopppingDetails: {
            'title': '日本花王Merries妙而舒纸尿裤 S82片/包',
            'reason': '日本原装进口腰贴式纸尿裤,温柔呵护宝宝娇嫩的小屁屁。点状设计,透气性更强;凹凸构造与防漏护围,紧紧锁定软便稀便不侧漏。备受亚洲妈妈青睐。新旧包装随机发'
        }
    },

    onLoad: function(options) {

        /*var that = this
        
        // 商品详情
        wx.request({
            url: 'http://huanqiuxiaozhen.com/wemall/goods/inqgoods?id=' + options.id,
            method: 'GET',
            data: {},
            header: {
                'Accept': 'application/json'
            },
            success: function(res) {
                //console.log(res.data.data);
                that.data.shopppingDetails = res.data.data;

                var goodsPicsInfo = [];
                var goodsPicsObj = {};
                var goodspic = res.data.data.goodspics;
                var goodspics = goodspic.substring(0, goodspic.length - 1);
                var goodspicsArr = goodspics.split("#");
                for (var i = 0; i < goodspicsArr.length; i++) {
                    goodsPicsInfo.push({
                        "picurl": goodspicsArr[i]
                    });
                }
                that.setData({
                    goodsPicsInfo: goodsPicsInfo
                })
            }
        })*/

        this.setData({
            goodsPicsInfo: [
                {picurl: 'http://image.huanqiuxiaozhen.com/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/2017_3_21_1490082693869'},
                {picurl: 'http://image.huanqiuxiaozhen.com/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/2017_3_21_1490082697446'}
            ]
        });

    }
})

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

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