实训第八天：电商美图外卖小程序

1.实现页面下滑滚动
<scroll-view style='height:100%;' scroll-y="true" bindscroll="scrollTopfun">

2.实现搜索框并实现下滑时固定在顶部
<view class="scout {{top>=20? 'fixed' :'' }}" bindtap="newpage"> 
//表示距离顶部130rpx时固定
  <image class='img' src='../../icons/icon.png'></image>
  <input class='ipt' placeholder='请输入商家或商品名称' placeholder-class='place' disabled="true"></input>
</view>
wxss页面类定义：
/* 搜索 */
.scout{
  background-color: #fff;
  display:flex;
  justify-content:center;
  align-items: center;
  padding: 20rpx 0 0;
  position: relative;
}
.scout>.img{
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  left: 22rpx;
}
.scout>.ipt{
  width:90%;
background-color:#f0f5f8;border-radius:15rpx;
  padding: 8rpx 0rpx;
  padding-left: 50rpx;
}
.fixed{
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
}
3.用swiper-item实现轮播图
<view class="container">
    <view class="top">
      <swiper class="top-swiper" indicator-dots="{{indicatorDots}}" circular="true"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{imgUrls}}">
          <swiper-item>
            <image mode="widthFix" src="{{item}}"/>
          </swiper-item>
        </block>
      </swiper>
4.插入搜索图标
<swiper class="middle-swiper" indicator-dots="true" autoplay="" interval="" duration="500">
        <swiper-item wx:for="{{icons}}" wx:for-item="list">
          <view class='icon' wx:for="{{list}}" wx:for-item="item">
            <image src="{{item.img}}"></image>
            <text>{{item.name}}</text>
          </view>
        </swiper-item>
      </swiper>
<swiper class="middle-swiper" indicator-dots="true" autoplay="" interval="" duration="500">
        <swiper-item wx:for="{{icons}}" wx:for-item="list">
          <view class='icon' wx:for="{{list}}" wx:for-item="item">
            <image src="{{item.img}}"></image>
            <text>{{item.name}}</text>
          </view>
        </swiper-item>
      </swiper>
    最后作业截图：
     

标签：fixed,item,padding,width,scout,实训,外卖,position,电商
来源： https://blog.csdn.net/CHENCHWT/article/details/93841571