微信小程序环球小镇主题馆商品首页样式模板制作设计下载

今天给大家带来环球小镇主题馆商品首页样式，制作好以后效果图如下：

一、wxml页面代码如下：

<!--index.wxml-->
<view class="container">
    <view>
        <swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
                autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
            <block wx:for="{{images}}">
                <swiper-item>
                    <image src="{{item.picurl}}" class="slide-image"/>
                </swiper-item>
            </block>
        </swiper>
    </view>

    <view class="text">
        <view class="line_flag"></view>
        <text>主题馆</text>
    </view>
    
    <view class="venues_box">
        <view class="venues_list">
            <block wx:for="{{venuesItems}}">
                <view class="venues_item">
                    <navigator url="../brand/index?id={{item.id}}">
                        <image src="{{item.smallpic}}"/>
                    </navigator>
                </view>
            </block>
        </view>
    </view>

    <view class="text">
        <view class="line_flag"></view>
        <text>环球精选</text>
    </view>

    <view class="choice_box">
        <view class="choice_list">
            <block wx:for="{{choiceItems}}">
                <navigator url="../details/index?id={{item.id}}">
                    <view class="choice_item">
                        <image src="{{item.goodspics}}"/>
                        <view class="title">{{item.title}}</view>
                    </view>
                </navigator>
            </block>
        </view>
    </view>

    <loading hidden="{{loadingHidden}}">
        加载中...
    </loading>

</view>

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

.container {
    background-color: #F2f2f2;
}

.swiper_box {
    width: 100%;
}

swiper-item image {
    width: 100%;
    display: inline-block;
    overflow: hidden;
}

view.text {
    display: flex;
    align-items: center;
    position: relative;
    padding: 10px 10px 10px 12px;
    font-size: 15px;
    color: #656565;
}

view.text:before {
    position: absolute;
    display: block;
    content: ' ';
    left: -5px;
    width: 2px;
    height: 100%;
    background-color: #09bb07;
}

.line_flag {
    width: 3px;
    height: 100%;
    height: 15px;
    display: inline-block;
    background-color: #f9f027;
}

view.text text {
    margin-left: 10px;
    line-height: 18px;
    font-weight: bold;
}

.venues_box {
    padding: 0 10rpx;
}

.venues_item {
    display: inline-block;
    width: 49%;
    margin: 0 0.5%;
}

.venues_item image{
    width: 100%;
    height: 90px;
}

.choice_box {
    padding: 0 10rpx;
}
.choice_box .choice_list .choice_item{
    margin-bottom: 15px;
}
.choice_box .choice_list image {
    width: 100%;
    height: 200px;
}

.choice_box .choice_list .title {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #333;
}

三、js页面代码如下：

//获取应用实例
var app = getApp()
Page({
    data: {
        indicatorDots: true,
        vertical: false,
        autoplay: true,
        interval: 3000,
        duration: 1000,
        loadingHidden: false  // loading
    },

    //事件处理函数
    swiperchange: function(e) {
        //console.log(e.detail.current)
    },

    onLoad: function() {
        console.log('onLoad')
        var that = this
            //调用应用实例的方法获取全局数据
        app.getUserInfo(function(userInfo) {
            //更新数据
            that.setData({
                userInfo: userInfo
            })
        })

        //sliderList
        wx.request({
            url: 'http://huanqiuxiaozhen.com/wemall/slider/list',
            method: 'GET',
            data: {},
            header: {
                'Accept': 'application/json'
            },
            success: function(res) {
                that.setData({
                    images: res.data
                })
            }
        })

        //venuesList
        wx.request({
            url: 'http://huanqiuxiaozhen.com/wemall/venues/venuesList',
            method: 'GET',
            data: {},
            header: {
                'Accept': 'application/json'
            },
            success: function(res) {
                that.setData({
                    venuesItems: res.data.data
                })
                setTimeout(function () {
                    that.setData({
                        loadingHidden: true
                    })
                }, 1500)
            }
        })

        //choiceList
        wx.request({
            url: 'http://huanqiuxiaozhen.com/wemall/goods/choiceList',
            method: 'GET',
            data: {},
            header: {
                'Accept': 'application/json'
            },
            success: function(res) {
                that.setData({
                    choiceItems: res.data.data.dataList
                })
                setTimeout(function () {
                    that.setData({
                        loadingHidden: true
                    })
                }, 1500)
            }
        })

    }
})

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