微信小程序开发 Day08

今天是实训倒数第三天，最后几天的任务是做一个类似于美团外卖的点餐小程序，将之前的搜索栏功能还有侧栏滑动功能加进去，并且有了跳转功能。在自己制作中主要的问题是制作跳转的模板调控比较繁琐。

任务：1、综合排序这一栏上拉后固定在顶部（搜索栏下面）；

           2、把首页的列表做出来（可swiper或横向滚动）。

     1、综合排序这一栏上拉后固定在顶部（搜索栏下面）；

      2、把首页的列表做出来（可swiper或横向滚动）

wxml源代码：

    <!-- 点餐 -->
        <view class="book-box">

            <view class="swiper-vertical-tab">
                <view wx:for="{
  {list}}" wx:key="{
  {index}}" class="{
  {currentType == index ? 'on' : ''}}" bindtap="chooseType" data-index="{
  {index}}">{
  {item.category}}</view>
            </view>

            <scroll-view class="swiper-vertical-box" scroll-y="true"  bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" enable-back-to-top="true">

                <view wx-if="{
  {currentType == idx}}" class="vertical-list" wx:for="{
  {list}}" wx:key="ids" wx:for-index="idx">
                    <!--
                    <text class="title">{
  {item.category}}</text>
                    -->

                    <view class="type-detail">
                        <view wx:for="{
  {item.goods}}" wx:key="jdx" wx:for-index="jdx">
                            <view class="detail-img">
                                <image src="{
  {item.thumbimg}}"></image>
                                <view wx:if="{
  {item.stock < 1}}" class="sale-out">已售罄</view>
                            </view>

                            <view class="book-detail">
                                <text>{
  {item.title}}</text>

                                <view>
                                    <text class="money">￥{
  {item.price}}</text>
                                    <view class="operations">
                            <button class="reduce" data-num="{
  {item.num}}" bindtap="reduceFoodNum" wx:if="{
  {item.num>0}}" data-idx="{
  {idx}}" data-jdx="{
  {jdx}}" data-price="{
  {item.price}}" data-title="{
  {item.title}}"></button>
                                <text wx:if="{
  {item.num>0}}">{
  {item.num}}</text>
                            <button wx:if="{
  {item.stock > 0}}" class="add" data-num="{
  {item.num}}" bindtap="addFoodNum"  data-idx="{
  {idx}}"
                                data-jdx="{
  {jdx}}" data-price="{
  {item.price}}" data-title="{
  {item.title}}"></button>
                        </view>

                                </view>
                            </view>

                        </view>
                    </view>

                </view>
            </scroll-view>

        </view>

    <!-- 下单 -->
    <view class="Bill-layer" wx:if="{
  {showCart && sumNum > 0}}" bindtap="hiddenLayer"></view>
    <view class="Bill">
        <block wx:if="{
  {showCart && sumNum > 0}}">
            <view class="clearCart">
                <button bindtap="clearCart">清空购物车</button>
            </view>

            <view class="book-result-detail" wx:for="{
  {list}}" wx:for-index="idx">

                <view wx:for="{
  {item.goods}}" wx:for-i