微信小程序点餐页面实现完整版

微信小程序点餐页面实现完整版

• • 效果
  • HTML
  • JS
  • CSS
  • • 总结

效果

 HTML

<view class="page">
	<view class="header-input" style="background:#efefef;height:40rpx;">
		<!-- 搜索条 -->
		<view class="search-input" style="background-color: white;" bindtap="searchNav">
			<icon size='15' type='search'></icon>
			<view style="padding-top:10rpx;">
				<text class='search-key'>搜索商品</text>
			</view>
		</view>
	</view>
	<view class="body">
		<!-- 左侧滚动栏 -->
		<view style='float: left' class='left'>
			<scroll-view scroll-y scroll-with-animation scroll-left="{
  
  {scrollLength}}" class='scrollY'
				style='height: {
  
  {winHeight}}px'>
				<view class='all clear'>
					<block wx:key="tabs" wx:for="{
  
  {tabs}}">
						<view bindtap='jumpIndex' data-menuindex='{
  
  {index}}' data-ft_id='{
  
  {item.ft_id}}'>
							<view class="text-style {
  
  {indexId==index?' activeView':''}}">
								<text class="{
  
  {indexId==index?'active1':''}}">{
  
  {item.ft_name}}</text>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<view class="right" style='height: {
  
  {winHeight}}rpx;width:calc(100% - 200rpx);'>
			<scroll-view scroll-y scroll-with-animation scroll-left="{
  
  {scrollLength}}" bindscroll="scrollToLeft"
				scroll-into-view="{
  
  {toTitle}}" class='scrollRight' style='height: {
  
  {winHeight}}px'>
				<block wx:key="tabs" wx:for="{
  
  {tabs}}" wx:for-item="itemft">
					<view id="view-{
  
  {itemft.ft_id}}">
						<view class="title" id="title-{
  
  {itemft.ft_id}}">{
  
  {itemft.ft_name}}</view>
						<view class="orders" wx:for="{
  
  {tabsList}}" wx:for-item="itemf">
							<view wx:if="{
  
  {itemf.ft_id==itemft.ft_id}}"
								style="height:180rpx;border-bottom:1rpx solid #F0F0F0;width:96%;margin:20rpx auto;">
								<image src="{
  
  {itemf.food_Img}}" bindtap="toDetail" data-id="{
  
  {itemf.f_Cooks_Id}}"
									data-ft_id="{
  
  {itemf.ft_id}}" style="width:160rpx;height:160rpx;float:left;"></image>
								<view style="width:calc(100% - 180rpx);float:right;height:160rpx;">
									<view
										style="height:40rpx;line-height:40rpx;margin-top:5rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
										{
  
  {itemf.f_Name}}</view>
									<view
										style="height:40rpx;line-height:40rpx;margin-top:15rpx;font-size:24rpx;color:#c2c2c2;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
										{
  
  {itemf.f_Description}}</view>
									<view style="height:40rpx;l