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

    微信小程序热门城市当前位置选择页面模板制作设计

    2018-05-24 12:21 来源/作者:懒人模板 分类:小程序教程  « »
    今天给大家带来热门城市当前位置选择页面模板制作设计,制作好以后效果图如下:
    一、wxml页面代码如下:
    <!--pages/workplace/workplace.wxml-->
    <view class="workplace_wrap">
        <view wx:if="{{show}}" class="has_select">
            <view class="title">
                <view>已选地区</view>
                <view>{{has_select.length}}/{{length}}</view>
            </view>
            <view class="w_action_list">
                <view bindtap="del_this" wx:for="{{has_select}}" data-city="{{item.city}}" data-id="{{item.id}}">
                    {{item.city}}<icon size="18" class="red" type="clear"></icon>
                </view>
            </view>
        </view>
    
    
        <view class="w_title">当前位置</view>
        <view wx:for="{{user_action}}" bindtap="select_action" data-id="{{item.id}}" data-city="{{item.current_location}}" class="w_a_wrap">
            <view class="w_a_list" >{{item.current_location}}</view>
            <image wx:if="{{show_img}}" class="image_select" src="image/_03.png"></image>
        </view>
    
    
        <view class="w_title">热门城市</view>
        <view wx:for="{{hot_city}}" bindtap="select_action" data-id="{{item.id}}" data-city="{{item.city}}" class="w_a_wrap">
            <view class="w_a_list" >{{item.city}}</view>
            <image wx:if="{{show_img}}" class="image_select" src="image/_03.png"></image>
        </view>
    
    
        <view class="w_title">按省份选择城市</view>
        <view wx:for="{{province}}" bindtap="select_province" data-id="{{item.id}}" data-province="{{item.province}}" class="w_a_wrap">
            <view class="w_a_list" >{{item.province}}</view>
            <image wx:if="{{show_img}}" class="image_select" src="image/_03.png"></image>
            <image wx:if="{{!show_img}}" class="image_select" src="image/jiantou_tou.png"></image>
        </view>
    </view>
    

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