微信小程序母婴产品品牌选择列表设计制作开发教程

本文给大家带来的是微信小程序母婴产品品牌选择列表设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="container">
    <block wx:for="{{brandList.brand}}">
        <view class="brand_item">
            <navigator url="../list/index?brand={{item.id}}&typeid={{item.typeid}}">
                <image src="{{item.pic}}" class="pic"></image>
                <view class="right_cont">
                    <image src="{{item.logo}}" class="logo"></image>
                    <text class="name">{{item.chinesename}}</text>
                    <text class="brief">{{item.brief}}</text>
                    <text class="price">￥{{item.minprice}}元/件起</text>
                </view>
            </navigator>
        </view>
    </block>
</view>

二、wxss样式文件代码如下：

page{
    background: #fff;
    font-size: 14px;
}
.container .brand_item{
    margin: 5px 0;
    border-top: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
}
.container .brand_item .pic{
    float: left;
    width: 50%;
    height: 120px;
}
.right_cont{
    float: right;
    width: 50%;
    text-align: center;
}
.right_cont .logo{
    display: block;
    width:90px;
    height: 46px;
    margin: 5px auto 0;
}
.right_cont text{
    display: block;
    margin: 5px 0;
}
.right_cont .brief{
    font-size: 12px;
    color: #939393;
}
.right_cont .price{
    color: #f16236;
}

三、js页面代码如下：

import defaultData from '../../data';
var app = getApp()
Page({
    data: {
        
    },
    onLoad: function(options) {

        // var that = this
        
        // wx.request({
        //     url: 'http://www.huanqiuxiaozhen.com/wemall/venues/getBrandAndType?id=' + options.id,
        //     method: 'GET',
        //     data: {},
        //     header: {
        //         'Accept': 'application/json'
        //     },
        //     success: function(res) {
        //         that.setData({
        //             brandList: res.data.data
        //         });
        //     }
        // })

        this.setData({
            brandList: defaultData.brandList
        });
    }
})

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