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

    微信小程序斗鱼首页界面页面设计制作开发教程

    2018-07-30 09:36 来源/作者:懒人模板 分类:小程序教程  « »
    本文给大家带来的是微信小程序斗鱼首页界面页面设计制作开发教程,制作好以后效果图如下:
    一、wxml页面代码如下:
    <!--导航条-->
    <view class="navbar">
     <text  wx:for="{{navbar}}"
            data-idx="{{index}}"
            class="item {{currentTab==index ? 'active' : ''}}"
            wx:key="unique" bindtap="navbarTap">{{item}}</text>
    </view>
    
    <!--推荐-->
    <view hidden="{{currentTab!==0}}">
      <view class="recommend" >
        <view class="swiper-container">
          <swiper autoplay="auto" interval="5000" duration="1000" current="{{swiperCurrent}}"
           bindchange="swiperChange" class="swiper">
            <block wx:for="{{slider}}" wx:key="">
              <swiper-item data-id="{{item.id}}">
                <image src="{{item.picUrl}}" class="img"></image>
              </swiper-item>
            </block>
          </swiper>
          <view class="dots">
          <block wx:for="{{slider}}" wx:key="">
            <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
          </block>
        </view>
      </view>
      </view>
    <view class="recommend_tr">
     <block wx:for = "{{image}}" wx:key="">
        <view bindtap="recommend_tr_tap"
        class="recommend_tr_img">
          <image class="image" id="{{item.id}}" src="{{item.img}}" mode="aspectFit"></image>
          <text class="coin">{{item.title}}</text>
        </view>
      </block>
    </view>
    <view class="recommend_tr_desc">
    <text>热门</text>
    <image class="image_icon" src="../image/热门.png" mode="aspectFit"></image>
    </view>
    <view class="recommend_sp">
      <block wx:for = "{{image_sp}}" wx:key="{{title}}">
        <view style= "width:350rpx;" class="recommend_sp_img">
          <image class="image1" src="{{item.img}}" mode="aspectFill"></image>
          <text class="shiping">{{item.title}}</text>
        </view>
      </block>
    </view>
    </view>
    
    <!--手游-->
    <view hidden="{{currentTab!==1}}">
      <view class="page1-top">
        <swiper class="navban" duration="1000" indicator-dots="true" indicator-active-color="#FFCE43">
              <swiper-item>
                  <block wx:for="{{navs}}" key="">
                      <view class="navbox">
                          <image class="navimg" src="{{item.img}}"></image>
                          <text class="navtext">{{item.name}}</text>
                      </view>
                   </block>
              </swiper-item>
              <swiper-item>
                  <block wx:for="{{navs}}" key="">
                      <view class="navbox">
                          <image class="navimg" src="{{item.img}}"></image>
                          <text class="navtext">{{item.name}}</text>
                      </view>
                   </block>
              </swiper-item>
      </swiper>
    </view>
    <view class="recommend_tr_desc">
    <text>热门</text>
    <image class="image_icon" src="../image/热门.png" mode="aspectFit"></image>
    </view>
    <view class="recommend_sp">
      <block wx:for = "{{image_sp}}" wx:key="{{title}}">
        <view style= "width:350rpx;" class="recommend_sp_img">
          <image class="image1" src="{{item.img}}" mode="aspectFill"></image>
          <text class="shiping">{{item.title}}</text>
        </view>
      </block>
    </view>
    </view>
    

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