小程序开发

发表于 更新于 分类于

　　2020年寒假在培训的时候记录的小程序项目

1.首页

1.1 搜索框组件

1.2 轮播图

1.2.1 index.js

1
2
3
4
5
6
7
8
9
// 页面开始加载，就会触发
onLoad: function (opitons) {
  // 1.发送异步请求获取轮播图数据
  var reqTask = wx.request({
    url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
    success: (result) => {
      console.log(result)
    },
  });

1.2.2 index.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- 轮播图开始 -->
   <view class="index_swiper">
       <!-- 
       1.swiper标签存在默认的宽度和高度    100% * 150px

       2.image标签默认的高度和宽度     320px * 240px 

       3.设计图片和轮播图
           3.1 先看原图宽高    750 * 340
           3.2 让图片高度自适应    宽度等于100%
           3.3 让swiper标签的高度  变成和图片一样高
       4.图片标签
         mode属性 渲染模式
           widthFix 让图片的标签宽高和图片标签的内容的宽高都等比例发生变化
       -->
       <swiper autoplay indicator-dots circular>
           <swiper-item wx:for="{{swiperList}}" wx:key="goods_id">
               <navigator>
                   <image mode="widthFix" src="{{item.image_src}}"></image>
               </navigator>
           </swiper-item>
       </swiper>
   </view>
   <!-- 轮播图结束 -->

1.2.3 index.wxss

1
2
3
4
5
6
7
8
9
10
.index_swiper {
    swiper {
        width: 750rpx;
        height: 340rpx;

        image {
            width: 100%;
        }
    }
}

2.导航条

2.1 获取接口数据

2.2 页面布局

2.2.1 左右菜单

2.2.2 点击效果

2.2.3 点击菜单切换内容

2.3 商品列表Tabs组件

3.分类

4.购物车

5.我的