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