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

    微信小程序肯德基外卖地址地图导航页设计制作开发教程

    2018-08-02 09:37 来源/作者:懒人模板 分类:小程序教程  « »
    本文给大家带来的是微信小程序肯德基外卖地址地图导航页设计制作开发教程,制作好以后效果图如下:
    一、wxml页面代码如下:
    <view class="container">
      <view class="header">
        <view class="select-city">
          <text>南昌</text>
          <image src="../../image/sanjiao.png"></image>
        </view>
        <view class="weui-search-bar">
          <view class="weui-search-bar__form">
            <view class="weui-search-bar__box">
              <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
              <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping"
              />
              <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
                <icon type="clear" size="14"></icon>
              </view>
            </view>
            <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
                <icon class="weui-icon-search" type="search" size="14"></icon>
                <view class="weui-search-bar__text">搜索</view>
            </label>
          </view>
          <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
        </view>
        <view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}" style="display: none">
          <navigator url="" class="weui-cell" hover-class="weui-cell_active">
            <view class="weui-cell__bd">
              <view>实时搜索文本</view>
            </view>
          </navigator>
          <navigator url="" class="weui-cell" hover-class="weui-cell_active">
            <view class="weui-cell__bd">
              <view>实时搜索文本</view>
            </view>
          </navigator>
          <navigator url="" class="weui-cell" hover-class="weui-cell_active">
            <view class="weui-cell__bd">
              <view>实时搜索文本</view>
            </view>
          </navigator>
          <navigator url="" class="weui-cell" hover-class="weui-cell_active">
            <view class="weui-cell__bd">
              <view>实时搜索文本</view>
            </view>
          </navigator>
        </view>
      </view>
      <view class="content">
    		<map id="myMap" longitude="{{longitude}}" latitude="{{latitude}}"
    		style="width: 100%; height: 100%" markers="{{markers}}" covers="{{covers}}" scale="18"></map>
    	</view>
      <view class="footer">
        <view class="address-title">你可能在的位置</view>
        <scroll-view class="address-list" style="height:299px;" scroll-y="true">
          <view class="address-item" wx:for="{{pois}}" wx:for-item="poi" 
            data-name="{{poi.address}}" catchtap="ToDetailPage">
            <image src="../../image/position.png" data-name="{{poi.address}}" catchtap="ToDetailPage"></image>
            <text catchtap="ToDetailPage" data-name="{{poi.address}}">{{poi.address}}</text>
          </view>
        </scroll-view>
      </view>
    </view>

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