微信小程序开发 Day08

最新推荐文章于 2020-04-21 11:24:45 发布

原创

最新推荐文章于 2020-04-21 11:24:45 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

本文记录了作者在实训最后阶段制作类似美团外卖的微信小程序点餐功能的过程，包括实现搜索栏下方的综合排序栏在上拉后固定，以及首页列表的创建，可以使用swiper或横向滚动展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

任务：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-index="jdx" wx:key="jdx" wx:if="{
  
  {item.num > 0}}">
                    <text>{
  
  {item.title}}</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