商家外卖页面开发-及scroll-view小程序踩坑

于 2020-06-16 12:24:37 发布
阅读量344 收藏 3
点赞数 1
分类专栏： 前端 文章标签： 小程序 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42404383/article/details/106784779
版权

文章目录

1、踩坑排错

scroll-view

基础库 1.0.0 开始支持，低版本需做兼容处理。

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性类型默认值必填说明最低版本
scroll-xbooleanfalse否允许横向滚动1.0.0
scroll-ybooleanfalse否允许纵向滚动1.0.0
纵向滑动

  • 效果图
    在这里插入图片描述

  • 支持浮动布局，盒型布局，定位布局等兼容效果较佳

  • 效果图

在这里插入图片描述
注意必须在style中添加、scroll-y=“true” style=“height:800rpx;”、否则无法滚动

横向滚动
  • 效果图

在这里插入图片描述

  • 天坑–不支持盒型布局 display:flex 、下面的页面开发中有其他布局的css

2、页面开发

全部封装成模板了、可直接导入使用

布局一
  • 效果图

在这里插入图片描述

  • 代码

    • <template name="takeout">
			<view class="store-box">
				<view class="item-box" wx:for="{{ storeList }}" wx:key="key" bindtap="toStore" data-id="{{ item.shop.id }}">
					<view class="container top-box">
						<view class="left">
							<image src="{{ item.shop.main_img_url }}"></image>
						</view>
						<view class="right">
							<text class="tit" >{{item.shop.name}}</text>
							<text class="store-tag">外</text>
							<view class="row justify-content">
								<view class="row-left">
									<i class="hxicon-favorfill "></i>
									<text class="t1">★{{item.shop.hot/20.0}}</text>
									<text class="t2">月售{{item.shop.monthly_sales?'item.shop.monthly_sales':'0'}}</text>
								</view>
								<view class="row-right">
									<i class="hxicon-locationfill"></i>
									<text style="color: #576B95;">{{item.shop.distance?item.shop.distance:'定位中'}}</text>
								</view>
							</view>
							<view class="row">
								<text >起送￥{{item.shop.price}}</text>
								<text class="t2" wx:if="store.shipping_dees > 0">配送￥{{item.shop.shipping_dees?item.shop.shipping_dees:'0'}} </text>
								<text class="t2" wx:else>免费配送</text>
								<text >人均￥{{item.shop.price}}</text>
							</view>
							<!-- <view class="row">
								
							</view> -->
						</view>
					</view>
					<scroll-view scroll-x="true" class="bottom-box">
						<view class="bottom-box-container">
							<view class="goods-box" wx:for="{{item.food}}" wx:key="key">
								<view class="img-box">
									<image src="{{ item.img_url }}"></image>
									<view class="tag">
										{{item.tag?'item.tag':'招牌'}}
									</view>
								</view>
								<view class="tit">
									{{item.name}}
								</view>
								<view class="price-box">
									<text class="txt1">￥</text>
									<text class="txt2">{{item.price}}*{{item.counts}}</text>
									<text class="txt3">￥{{item.price_s}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>	

</template>

      .store-box {
  margin: 0rpx 10rpx;
}

.store-box .item-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  background-color: #ffffff;
  margin-top: 10rpx;
  padding: 30rpx 20rpx;
}

.store-box .item-box .top-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
          flex-direction: row;
}

.store-box .item-box .top-box .left {
  margin-right: 10px;
}

.store-box .item-box .top-box .left image {
  width: 72px;
  height: 54px;
  border-radius: 6px;
}

.store-box .item-box .top-box .right {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  position: relative;
  overflow: hidden;
}

.store-box .item-box .top-box .right .tit {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-box .item-box .top-box .right .justify-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}

.store-box .item-box .top-box .right .row {
  font-size: 12px;
  color: #999999;
  margin-top: 4px;
}

.store-box .item-box .top-box .right .row .row-left {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
          flex-direction: row;
}

.store-box .item-box .top-box .right .row .row-left .t1, .store-box .item-box .top-box .right .row .row-left ._i {
  color: #ffca3e;
}

.store-box .item-box .top-box .right .row .t2 {
  margin: 0 12rpx;
}

.store-box .item-box .top-box .right .row .row-right {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
          flex-direction: row;
}

.store-box .item-box .top-box .right .row .row-right ._i {
  margin-right: 4px;
}

.store-box .item-box .bottom-box-container {
  /* margin: 12px 0 0; */
  margin-top: 10rpx;
  padding-left: 140rpx;
  white-space: nowrap;
}

.store-box .item-box .bottom-box-container .goods-box {
  width: 80px;
  margin-left: 12px;
  display: inline-block;
}

.store-box .item-box .bottom-box-container .goods-box .img-box {
  position: relative;
  width: 80px;
  height: 60px;
  background-color: #f1f1f1;
  border-radius: 4px;
}

.store-box .item-box .bottom-box-container .goods-box .img-box image {
  width: 100%;
  height: 60px;
}

.store-box .item-box .bottom-box-container .goods-box .img-box .tag {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #FF5722;
  color: #ffffff;
  padding: 2px 4px;
  font-size: 12px;
  border-radius: 4px;
}

.store-box .item-box .bottom-box-container .goods-box .tit {
  font-size: 14px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-box .item-box .bottom-box-container .goods-box .price-box {
  margin-top: 4px;
}

.store-box .item-box .bottom-box-container .goods-box .price-box .txt1 {
  font-size: 10px;
  color: #FF5722;
}

.store-box .item-box .bottom-box-container .goods-box .price-box .txt2 {
  font-size: 16px;
  color: #FF5722;
}

.store-box .item-box .bottom-box-container .goods-box .price-box .txt3 {
  margin-left: 6px;
  font-size: 10px;
  color: #bbbbbb;
  text-decoration: line-through;
}

.store-box .item-box .bottom-box-container .goods-box:last-child {
  margin-right: 12px;
}

.store-box .item-box:last-child {
  border-bottom: 0;
}

.store-tag{
  position: absolute;
  right: 0;
  width: 30rpx;
  height: 30rpx;
  text-align: center;
  background-color: rgb(255, 244, 226);
  color: #ffca3e;
  font-weight: bold;
  top: 0;
}
布局二
  • 效果图

在这里插入图片描述

  • 代码

    • <template name="shop">
  <view class="shop-box" wx:for="{{shopArr}}" wx:key="id" bindtap="toShopDetail" data-id="{{ item.id }}">
    <view class="shop-avatar">
      <image class="shop-img" src="{{ item.main_img_url ? item.main_img_url : '../../images/icon/blank.png' }}" mode="aspectFill"></image>
    </view>
    <view class="shop-info">
      <text class="shop-title">{{item.name}}</text>
      <view class="shop-content">
        <view class='stars-container'>
          <view class='stars'>
          <block wx:for="{{ (item.hot/20) }}" wx:for-item="i" wx:key="position">
            <image wx:if="{{i+1}}" src='/images/icon/star@selected.png'></image>
            <!-- <image wx:elif="{{i==2}}" src='/images/icon/star@before.png'></image> -->
            <image wx:else src='/images/icon/star@before.png'></image>
          </block>
          </view>
          <text class='star-score'>{{ (item.hot/20.0) }}分</text>
        </view>
        <text class="shop-price">￥{{item.price}}/人</text>
        <text>2.5km</text>
      </view>
      <view class="shop-category">
        <text>传统中餐/堂食</text>        
        <text>季度单数520</text>
      </view>
      <view class="shop-active">
        <text>惠</text>
        <text>25.8元金典单人套餐，50元惬意双人套餐</text>
      </view>
      <!-- 活动logo -->
      <view class="n-s-c-status">
        <block wx:for="{{ item.coupon }}" wx:key="id">
          <text class="n-s-c-s-left">满{{item.isprice}}送券{{item.lose_price}}</text>        
        </block>
      </view>
    </view>
    <!-- 类别标志 -->
    <view class="shop-star">
      <text class="shop-tag">外</text>
    </view>      
  </view>
</template>

      /*首页商家*/
.shop-box{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0rpx 10rpx  10rpx 10rpx;
  padding: 20rpx;
  position: relative;
  background-color:#fff; 
  height: 250rpx;
  border-radius: 8rpx;
}

.shop-img{
  width:220rpx;
  height:240rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.shop-info{
  width:520rpx;
  display:flex;
  flex-direction: column;
  color:#666;
  line-height: 1.5;
  text-align: justify;
  height: 250rpx;
}

.shop-title{
  font-size: 32rpx;
  color:#333;
  font-weight: 900;
}

.shop-price{
  color: red;
  font-size: 24rpx;
  font-weight: bold;
}

.shop-content{
  display: flex;
  overflow: hidden;
  flex-wrap: nowrap;
  margin: 10rpx 0;
  align-items: center;
  position: relative;
}

.stars-container {
  display: flex;
  flex-direction: row;
}

.stars {
  display: flex;
  flex-direction: row;
  align-items: center;  
}

.stars image {
  padding-left: 3rpx;
  height: 24rpx;
  width: 24rpx;
}

.star-score {
  margin: 0 10rpx;
}

.shop-content>text:first-child{
  color: #ff7440;
}

.shop-content>text:last-child{
  position: absolute;
  right: 0;
  margin-right: 5rpx;
}

.shop-category{
  display: flex;
  overflow: hidden;
  position: relative;
}

.shop-category>text:last-child{
  position: absolute;
  right: 0;
  margin-right: 5rpx;
  color: #ff7440;
  font-weight: bold;
}

.shop-active{
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
  margin: 10rpx 0;
  flex-wrap: nowrap;
}

.shop-active text:first-child{
  background-color: #ff7440;
  color: #fff;
  margin-right: 10rpx;
  text-align: center;
  width: 30rpx;
}

.shop-active text:last-child{
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 10rpx;
}

.n-s-c-status {
  display: flex;
  overflow: hidden;
  flex-wrap: nowrap;
}

.n-s-c-status .n-s-c-s-left {
  color: #ff7440;
  padding: 2rpx 4rpx;  
  border-radius: 8rpx;
  border: #ff7440 1rpx solid;
  margin-right: 10rpx;
  white-space: nowrap;
  font-size: 22rpx;
  font-weight: bold;
}

.n-s-c-status .n-s-c-s-left-gray {
  color: #ccc;
  padding: 2rpx 4rpx;  
  border-radius: 5rpx;
  border: solid 1rpx #ccc;
  margin-right: 15rpx;
  white-space: nowrap;
}

.shop-star{
  position: absolute;
  right:10rpx;
  top:10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(255, 244, 226);
  padding: 5rpx;
}

.shop-tag{
  text-align: center;
  color: #ff7440;
  font-weight: bold;
}
布局三
  • 效果图

在这里插入图片描述

  • 代码

    • <template name="shop-update">
  <view class="stores" wx:for="{{ shopArr }}" wx:key="id" bindtap="toShopDetail" data-id="{{ item.store_id }}">
    <view class="single-store">

      <!-- head -->
      <view class="store-head">
        <image src="{{ item.avatar ? item.avatar : '../../images/icon/blank.png' }}" mode="aspectFill"></image>
        <view class="store-content">
          <text>{{item.name}} ( {{item.community}} )</text>
          <view class="store-content-text">
            <text>★{{ item.mark }}</text>
            <text>{{ item.distance }}m</text>          
          </view>
        </view>
        <text>进店 ></text>
      </view>

      <!-- logo -->
      <view class="store-log">
        <view class="log-box">
          <text>满额送券</text>
        </view>
        <view class="log-box">
          <text>自推活动</text>
        </view>
        <view class="log-box">
          <text>用餐有奖</text>
        </view>      
        <view class="log-box">
          <text>支持外卖</text>
        </view>
      </view>

      <!-- pic -->
      <view class="store-botton">
        <scroll-view scroll-x="true" style="width:100%">
          <view class="store-dishes-boxs">
            <view class="store-dishes" wx:for="{{item.goods}}" wx:key="id">
              <image src="{{item.main_pic}}"></image>
              <view class="store-dishes-name">{{item.name}}</view>
              <view class="store-dishes-price">
                <text>{{item.price}}</text>
                <text>原{{item.old_price}}</text>            
              </view>
            </view>          
          </view>                
        </scroll-view>
      </view>

    </view>
  </view>
</template>

      /* -------------update tmplate css---------------- */
.stores{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 10rpx;
}

.single-store{
  overflow: hidden;
  background-color: #fff;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  padding: 10rpx;
}

.store-head image{
  width: 105rpx;
  height: 100rpx;
  border-radius: 10rpx;
}

.store-head{
  display: flex;
  margin: 10rpx;
  align-items: flex-start;
  position: relative;
}

.store-head>text{
  font-size: 30rpx;
  font-weight: 600;
  color: #000;
  /* margin-left: 300rpx; */
  position: absolute;
  right: 0;
}

.store-content{
  display: flex;
  flex-direction: column;
  margin-left: 20rpx;
}

.store-content>text:first-child{
  font-size: 30rpx;
  font-weight: 600;
  color: #000;
}

.store-content-text{
  display: flex;
}

.store-content-text>text:first-child{
  margin-right: 10rpx;
  color: rgb(255, 160, 0);
}

.store-log{
  display: flex;
  overflow: hidden;
}

.log-box{
  margin: 0 10rpx;
  height: 30rpx;
  background-color: rgb(254, 244, 242);
  padding: 6rpx;
  line-height: 30rpx;
  border-radius: 5rpx;
}

.log-box>text{
  color: rgb(242, 83, 18);
  font-weight: 600;
}

.store-botton{
  margin-top: 20rpx;
  display: flex;
  flex-direction: row;
}

.store-dishes-boxs{
  display: block;
  overflow: scroll;
  white-space: nowrap; 
}

.store-dishes{
  display:inline-block;  
  margin: 0 0 10rpx 15rpx;
}

.store-dishes>image{
  width: 150rpx;
  height: 120rpx;
  border-radius: 15rpx;
}

.store-dishes-name{
  color: #000;
  width: 150rpx;
  margin-top: 5rpx;
  font-size: 26rpx;
  flex-wrap: nowrap;  
  height: 40rpx;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-dishes-price{
  display: flex;
  align-items: flex-end;
}

.store-dishes-price text:first-child{
  color: rgb(242, 83, 18);
  font-size: 32rpx;
  font-weight: 600;
  margin-right: 10rpx;
}

.store-dishes-price text:last-child{
  text-decoration: line-through;
  color: #aaa;
}
黑仔丶
关注
专栏目录
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
10-17
一、微信小程序scroll-view横向滚动实践踩坑 1. 默认情况下，scroll-view组件是不支持滚动的。为了解决这个问题，开发者需要设置scroll-x="true"属性，这样scroll-view组件就会支持横向滚动。若要支持垂直滚动，则...
微信小程序的视图容器-- scroll-view
03-29
scroll-view:可滚动视图区域 属性名 类型 默认值 说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper ...
小程序踩坑
DE_恶魔的博客
04-09 217
最近突然多了很多小程序的需求，我就试了试水，发现还是很简单的，可能只是做了些皮毛 1.视频播放 https://blog.csdn.net/Hello_Java2018/article/details/84298576 参考上面的博客可以很简单做到一个简单的视频播放页面，不过怎样动态添加视频是我接下来要研究的内容 2.结合EasyAR做到简单的识别图片展示AR模型 https://hel...
小程序踩坑篇
jsonnan的博客
01-25 492
小程序踩坑篇 小程序 wx.navigateTo和wx.redirectTo 不跳转问题 小程序 wx.navigateTo和wx.redirectTo 不跳转问题 当我们在开发小程序，跳转带有tabBar的页面不能跳转 此时应使用 wx.switchTab 设置跳转事件
微信小程序scroll-view组件实现滚动动画
08-28
微信小程序 scroll-view 组件实现滚动动画 微信小程序 scroll-view 组件是一种常用的滚动容器组件，通过设置 scroll-into-view 和 scroll-with-animation 属性可以实现滚动动画效果。在本文中，我们将详细介绍如何...
微信小程序scroll-view下拉刷新(附带下拉刷新效果)
11-19
在微信小程序开发中，`scroll-view`组件是一个非常重要的元素，它允许用户在内容超过屏幕范围时进行滚动浏览。在本教程中，我们将探讨如何在`scroll-view`中实现下拉刷新（Pull-to-Refresh）功能，同时提供一个具体...
外卖流程页面小程序前端模板
最新发布
05-31
外卖流程页面小程序模板简介 外卖流程页面小程序前端模板源码
小程序外卖订单界面的示例代码
10-15
主要介绍了小程序外卖订单界面的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
模仿美团外卖小程序静态模板页面
09-14
纯前端模板页面，订餐外卖小程序模板，仿美团外卖。无后端接口，下载运行即可看到效果
小程序踩坑（不断更新）
红豆技术栈
02-23 798
小程序不是在浏览器中运行，无法操作DOM元素（类似document.getElementById以及Jquery的$("#id")等操作都不能进行））；小程序中没有alert事件 ，存在封装好的两种消息弹窗—— 参考http://www.jb51.net/article/98187.htm； 1，toast弹窗：         书写方式： wx.showToast({  titl
学小程序踩过的坑
qq_38687379的博客
03-16 240
 *1、小程序用setTimeOut函数时间，this很容易找不到方向。所以需要在执行setTimeOut之前将this定义后指定好。要在前面加上const that = this;然后将延时函数里面的this换成that      例如：Page({ /** * 页面的初始数据 */ data: { name: "0", }, /** * 生命周期函数--监听页面加载 ...
小程序踩坑汇总
weixin_30360497的博客
08-24 213
记录踩过的小程序的坑点（持续更新） 1.getCurrentPages() 　　这玩意官网在官网 框架 —> 路由（在这里有进行描述） 　　食用方法： 　　　　在onload或者onshow函数中调用小程序的API 　　　　　　var pages = getCurrentPages() //获取加载的页面 　　　　然后就能正常食用（使用）了 　　　　 2. wx...
小程序的坑
qq_38674970的博客
04-12 237
1.页面跳转：  tabbar要保证跳转不同啊。。从首页跳转到tabbar页面要用switchTab啊不能用redirectTo啊啊啊// 页面跳转同时保留原页面wx.navigateTo({ url: 'page/home/home?user_id=111' })// 关闭当前页面，跳转到应用内的某个页面。 wx.redirectTo({ url: 'page/home/home?us...
小程序踩坑记录
weixin_34352449的博客
05-15 363
前言 经历了互联网寒冬，一波面试下来。发现了学习的东西还有很多。后面也拿到了比较满意的offer。新入职的第一个项目是关于小程序的，之前我也接触小程序的，只不过是个人玩玩的项目。所以说一路踩坑过来，下面我把这段时间遇到的一些问题总结下，希望对正在小程序开发的你有所帮助，本人经验有限，以下讲的不好的欢迎指正。 1、小程序工程化开发 目前小程序开发框架有很多，mpvue、wepy。我在项目中使用的是原...
小程序踩坑总结
海阔天空
02-26 534
1.长按保存图片，我们遇到过：IOS什么都不用做长按就会弹出保存的弹窗，安卓却不会。在此总结两种方式： 1）监听图片的点击（tap）或长按（longpress）事件，调用小程序预览图片api，再长按就可以保存了，除了保存还能实现识别途中小程序码（不是同个主题的小程序码也能跳转）、发送给朋友等功能。备注：不需要用户授权 scan:function(e){ 　　var current = e...
小程序开发：scroll-view组件深度解析与实战
在小程序开发中，`scroll-view`组件是一个非常重要的部分，它允许用户在内容超过屏幕显示范围时进行上下滚动查看完整信息。 `scroll-view`组件的基本用法是在WXML文件中创建一个`<scroll-view>`标签，并设置相应的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值