项目实训（六）：

项目在进行中，我也对自己所写的几个页面进行了优化，其中主页的效果如下图所示：

                     

  可以由上至下具体将其划分为：<!-- 上方的轮播图 -->、<!-- 功能陈列区 -->、  <!-- 搜索过滤区 -->、  <!-- 小提示过渡区 -->、  <!-- 陈列景观区 -->，这些部分在wxml里的代码如下图所示：

      这其中功能陈列区与景观陈列区的布局类似，都是相似元素的循环布局唯一的区别是功能陈列区四个元素一行、景点陈列区两个元素一行。

     特别值得注意的是我还引入了一个动态的可以任意拖动的机器人gif图像用以点击进入后跳转至AI问答对话的界面，主要实现方法就是用 <movable-area>组件将整个页面包裹在里面，这样<movable-view>可移动元素就可以在整个页面拖动。具体实现代码如下图所示。

    以上这些代码组成了我们组小程序的主页的wxml文件，即实现了页面的宏观布局其中具体的实现小组件已经在先前的文章里说出因此就不再这里赘述。