小程序开发--选择器多级联动

发布日期： 2018-05-16 阅读量： 作者： 网络

近段时间由于一直沉迷王者农药无法自拔，在这先自我检讨...
首先说下今天要做的需求：如下图，是前段时间给app中添加的客诉功能。

小程序开发--选择器多级联动

iOS.gif

能看到，里面涉及到了选择器多级联动（这里就两级）。然而，上星期三的时候接手了公司的小程序，说是小程序，其实也就两三个页面，要我把APP上的功能加上去，其中包括这个“我要投诉”的页面，综合了下安卓的选择器效果，下面看小程序上做出后的效果如下图：

小程序开发--选择器多级联动

小程序.gif

先大致说下这个页面的所需文件，

小程序开发--选择器多级联动

所需文件.png

是的，小程序的每个页面都需要.js/.json/.wxml/.wxss文件，就像前端 "三剑客"一样，这里是四剑客，但.json其实也是可有可无的，本质上还是三剑客...关于小程序的话题不多说了，对小程序感兴趣的可以私信我讨论哈。
下面开始装X。
先从布局UI开始，也就是 .wxml 和 .wxss（只给出多级联动的部分）

.wxml

    <view>  
        <view>
        <text>选择购买门店:</text><text>{{areaSelectedStr}}&gt;</text>
        </view>
        <text>{{detailAddress}}</text>

    </view> 

//选择器
    <view>
    <view></view>
    <view>
        <view>
            <text>请选择门店</text>
            <text>X</text>
        </view>
        <view>

            <text>{{areaName}}</text>
            <text>{{shopName}}</text>
            <text>{{detailAddress}}</text>

            <view></view>
            <swiper>

                <block> 0}}"&gt;
                    <swiper-item>
                        <scroll-view>
                            <view>
                                <text>{{item}}</text>
                                <text>{{item}}</text>
                            </view>
                        </scroll-view>
                    </swiper-item>
                </block>

                <block> 0}}"&gt;
                    <swiper-item>
                        <scroll-view>
                            <view>
                                <text>{{item}}</text>
                                <text>{{item}}</text>
                            </view>
                        </scroll-view>
                    </swiper-item>
                </block>

              <block> 0}}"&gt;
                    <swiper-item>
                        <scroll-view>
                            <view>
                                <text>{{item}}</text>
                                <text>{{item}}</text>
                            </view>
                        </scroll-view>
                    </swiper-item>
                </block>

            </swiper>
        </view>
    </view></view>

# 小程序 # 选择器 # 多级联动

上一篇: Docker 有性能损失吗？

下一篇: docker编排工具有哪些?

小程序开发--选择器多级联动

随便看看