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

    万科房地产小程序首页样式制作设计教程下载

    2018-06-25 10:24 来源/作者:懒人模板 分类:小程序教程  « »
    本文给大家带来的是万科房地产小程序首页样式制作设计教程,制作好以后效果图如下:
    一、wxml页面代码如下:
    <!--index.wxml-->
    <view class="container">
      <swiper indicator-dots="true" autoplay="true" interval="3000" duration="800" class="swiper-banner bg-white">
        <block wx:for="{{banners}}" wx:key="item.id">
          <swiper-item>
            <image src="{{item}}" mode="scaleToFill" style="width:100%;height:400rpx;"></image>
          </swiper-item>
        </block>
      </swiper>
      <view class="menuWrap bg-white">
        <view class="menuWrap-item">
          <view class="menuWrap-item-navi" bindtap="getScanning">
            <span class="iconfont icon-qrcode"></span>
            <text>扫描预订</text>
          </view>
        </view>
        <view class="menuWrap-item">
          <navigator class="menuWrap-item-navi" url="../booking/booking?type=seat">
            <span class="iconfont icon-zuowei"></span>
            <text>预约座位</text>
          </navigator>
        </view>
        <view class="menuWrap-item">
          <navigator class="menuWrap-item-navi" url="../booking/booking?type=room">
            <span class="iconfont icon-huiyishi"></span>
            <text>预约会议室</text>
          </navigator>
        </view>
      </view>
      <view class="noticeList bg-white">
        <block wx:for="{{notice}}" wx:key="item.id">
          <navigator class="noticeList-item" url="../article/article">
            <image src="{{item.image}}" style="width:112px;height:68px;"></image>
            <view class="noticeList-item-r">
              <text class="noticeList-item-title">{{item.title}}</text>
              <text class="noticeList-item-desc">{{item.desc}}</text>
            </view>
          </navigator>
        </block>
      </view>
    </view>
    <import src="../../template/template.wxml"/>
    <template is="qrcode" />
    

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