欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序手机出售商城首页展示样式模板制作设计下载

    2018-06-13 09:58 来源/作者:懒人模板 分类:小程序教程  « »
    制作好以后效果图如下:
    一、wxml页面代码如下:
    <!--index.wxml-->
    <view class="container">
      <scroll-view class="scroll-container" upper-threshold="{{sortPanelDist}}" bindscroll="onToTop" scroll-y="true" style="height:calc(100% - 1px)">
        <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="swiper-height">
            <block wx:for="{{imgUrls}}">
                <swiper-item>
                    <image src="{{item}}" class="slide-image" style="height:{{windowWidth * 0.375}}px !important"/>
                </swiper-item>
            </block>
        </swiper>
        <view class="category-panel">
            <view class="category-item">
                <image class="category-item-image" src="../resources/images/ic_index_tab_kind.png" />
                <text class="category-item-text">分类</text>
            </view>
            <view class="category-item">
                <image class="category-item-image" src="../resources/images/ic_index_tab_ten.png" />
                <text class="category-item-text">优选</text>
            </view>
            <view class="category-item">
                <image class="category-item-image" src="../resources/images/ic_index_tab_share.png" />
                <text class="category-item-text">晒单</text>
            </view>
            <view class="category-item">
                <image class="category-item-image" src="../resources/images/ic_index_tab_qa.png" />
                <text class="category-item-text">常见问题</text>
            </view>
        </view>
       
        <view class="sort-panel" style="position:{{sortPanelPos}};top:{{sortPanelTop}}px">
            <view class="sort-item">人气</view>
            <view class="sort-item">最新</view>
            <view class="sort-item">进度</view>
            <view class="sort-item comb on">
                <view class="comb-text">限时秒杀</view>
                <view class="comb-arrs down">
                    <image class="comb-arr-up" src=""></image>
                    <image class="comb-arr-down" src=""></image>
                </view>
            </view>
        </view>
        <view class="goods-panel">
            <import src="tpl/goodsList.wxml"/>
            <template is="goodsList" data="{{goodsList:goodsList}}"/>
        </view>
      </scroll-view>
      <view class="tabbar-border"></view>
    </view>
    

    点击扫描效果预览 免费下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议