微信小程序-成品组件（iPhoneX）

1.swiper轮播图组件

1.1 wxml

注：请替换成自己的wx:for进行遍历

<view class="banner">
<swiper
circular="true"
autoplay="true"
previous-margin="30rpx"
previous-margin="30rpx"
interval="3000"
indicator-dots="true"
indicator-active-color="#BDA066"
>
  <swiper-item>
    <image src="/static/images/banner0.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/static/images/banner1.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/static/images/banner2.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/static/images/banner3.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/static/images/compic.jpg"></image>
  </swiper-item>
</swiper>
</view>

1.2wxss

.banner {
  padding-top: 30rpx;
}

.banner swiper {
  height: 460rpx;
}

.banner swiper swiper-item image {
  width: 690rpx;
  height: 460rpx;
  border-radius: 30rpx;
}

1.3scss

.banner{
  padding-top: 30rpx;
  swiper{
    height: 460rpx;
    swiper-item{
      image{
        width: 690rpx;
        height: 460rpx;
        // 圆角
        border-radius: 30rpx;
      }
    }
  }
}

1.4成品图

1.5解释

注：解释可能有误

 1.6 wxml的wx:for

注：可能有错（1.5/1.6均为chatgpt生成）

<view class="banner">
  <swiper
    circular="true"
    autoplay="true"
    previous-margin="30rpx"
    next-margin="30rpx"
    interval="3000"
    indicator-dots="true"
    indicator-active-color="#BDA066"
  >
    <swiper-item wx:for="{{bannerList}}" wx:key="index">
      <image class="image" src="{{item}}"></image>
    </swiper-item>
  </swiper>
</view>

2.scroll-view

2.1wxml

<view class="scrollNav">
  <scroll-view scroll-x="true">
    <navigator url="" class="item" wx:for="{{6}}" wx:key="index">
      <view class="pic">
        <image src="/static/images/navicon1.png" mode=""/>
      </view>
      <view class="text">
      明星茶
      </view>
    </navigator>
  </scroll-view>
</view>

2.2wxss

.scrollNav {
  padding: 60rpx 30rpx;
}

.scrollNav scroll-view {
  white-space: nowrap;
}

.scrollNav scroll-view .item {
  display: inline-block;
  padding: 0 25rpx;
  text-align: center;
}

.scrollNav scroll-view .item .pic {
  width: 105rpx;
  height: 105rpx;
}

.scrollNav scroll-view .item .pic image {
  width: 100%;
  height: 100%;
}

.scrollNav scroll-view .item .text {
  font-size: 34rpx;
  color: var(globalColor);
  padding-top: 10rpx;
}

.scrollNav scroll-view .item:first-child {
  padding-left: 0;
}

.scrollNav scroll-view .item:last-child {
  padding-right: 0;
}

2.3scss

.scrollNav{
  padding:60rpx 30rpx;
  scroll-view{
    white-space: nowrap;
    .item{
      display: inline-block;
      padding: 0 25rpx;
      text-align: center;
      .pic{
        width: 105rpx;
        height: 105rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
      .text{
        font-size: 34rpx;
        color:var(globalColor);
        padding-top: 10rpx;
      }
    }
    .item:first-child{padding-left: 0;}
    .item:last-child{padding-right: 0;}
  }
}

2.4解释

2.5wx:for版

<view class="scrollNav">
  <scroll-view scroll-x="true">
    <block wx:for="{{navList}}" wx:key="index">
      <navigator url="{{item.url}}" class="item">
        <view class="pic">
          <image src="{{item.picUrl}}" mode=""></image>
        </view>
        <view class="text">
          {{item.text}}
        </view>
      </navigator>
    </block>
  </scroll-view>
</view>

3 vant组件的使用

3.1官方文档-快速上手

Vant Weapp - 轻量、可靠的小程序 UI 组件库

3.2可能出现的问题

1.在执行npm安装命令时没有出现文件夹

则进行指定文件夹，目录安装：

npm install @vant/weapp -S --production --prefix 项目根目录

 2.新版本的json文件，请这样写