微信小程序学习

正曦08

已于 2022-07-19 20:55:15 修改

阅读量601

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签：微信小程序学习小程序

于 2021-08-02 09:46:33 首次发布

本文链接：https://blog.csdn.net/qq_57985179/article/details/119317491

前端学习专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种在小程序中实现导航、楼层展示、分类界面、下拉加载更多及页面加载优化的方法。通过自定义组件和样式，实现了丰富的用户体验。同时介绍了如何使用JS模块化请求数据并解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、导航组件

wxml：

<view class="index_catr" >
        <navigator wx:for="{{catesList}}" wx:key="name">
            <image mode="widthFix" src="{{item.image_src}}" />
        </navigator>   
    </view>

wxss：

.index_catr {
  display: flex;
}
.index_catr navigator {
  padding: 20rpx;
  flex: 1;
}
.index_catr navigator image {
  width: 100%;
}

js：

import {request} from "../../request/index.js";
Page({
    data: {
        catesList: [],
    },
    onLoad: function (options) {
        this.getCateList();
    },

    getCateList(){
        request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"})
        .then(result=>{
            this.setData({
                catesList:result.data.message
            })
        })
    },
});

二、实现楼层效果

wxml：

<view class="index_floor">
    <view class="floor_group"
    wx:for="{{floorList}}"
    wx:for-item="item1"
    wx:for-index="index1"
    wx:key="floor_title"
    >
      <view class="floor_title">
        <image mode="widthFix" src="{{item1.floor_title.image_src}}"></image>
      </view>
      <view class="floor_list">
        <navigator 
        wx:for="{{item1.product_list}}"
        wx:for-item="item2"
        wx:for-index="index2"
        wx:key="name"
        url="{{item2.navigator_url}}"
        >
        <image mode="{{index2===0?'widthFix':'scaleToFill'}}" src="{{item2.image_src}}"></image>
      </navigator>
      </view>
    </view>
  </view>

wxss：

.index_floor .floor_group .floor_title {
  padding: 10rpx 0;
}
.index_floor .floor_group .floor_title image {
  width: 100%;
}
.index_floor .floor_group .floor_list {
  overflow: hidden;
}
.index_floor .floor_group .floor_list navigator {
  float: left;
  width: 33.33%;
}
.index_floor .floor_group .floor_list navigator:nth-last-child(-n+4) {
  height: 27.72711207vw;
  border-left: 10rpx solid #fff;
}
.index_floor .floor_group .floor_list navigator:nth-child(2),
.index_floor .floor_group .floor_list navigator:nth-child(3) {
  border-bottom: 10rpx solid #fff;
}
.index_floor .floor_group .floor_list navigator image {
  width: 100%;
  height: 100%;
}

js：

import {request} from "../../request/index.js";
Page({
    data: {
        floorList: []
    },
    onLoad: function (options) {
        this.getFloorList();
    },
    getFloorList(){
        request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/floordata"})
        .then(result=>{
            this.setData({
                floorList:result.data.message
            })
        })
    },
});

三、实现分类界面效果

wxml：

<view class="cates">
  <SearchInput></SearchInput>
  <view class="cates_container">
    <scroll-view scroll-y class="left_menu">
      <view class="menu_item {{index===currentIndex?'active':''}}" wx:for="{{leftMenuList}}" wx:key="*this"
        bindtap="handleItemTap" data-index="{{index}}">
        {{item}}
      </view>
    </scroll-view>
    <scroll-view scroll-top="{{scrollTop}}" scroll-y class="right_content">
      <view class="goods_group" wx:for="{{rightContent}}" wx:for-index="index1" wx:for-item="item1">
        <view class="goods_title">
          <text class="delimiter">/</text>
          <text class="title">{{item1.cat_name}}</text>
          <text class="delimiter">/</text>
        </view>
        <view class="goods_list">
          <navigator wx:for="{{item1.children}}" wx:for-index="index2" wx:for-item="item2" wx:key="cat_id"
            url="/pages/goods_list/goods_list?cid={{item2.cat_id}}">
            <image mode="widthFix" src="{{item2.cat_icon}}"></image>
            <view class="goods_name">{{item2.cat_name}}</view>
          </navigator>
        </view>
      </view>
    </scroll-view>
  </view>
</view>

wxss：

page {
  height: 100%;
}
.cates {
  height: 100%;
}
.cates .cates_container {
  height: calc( 100vh - 90rpx );
  display: flex;
}
.cates .cates_container .left_menu {
  flex: 2;
}
.cates .cates_container .left_menu .menu_item {
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
}
.cates .cates_container .left_menu .active {
  color: var(--themeColor);
  border-left: 5rpx solid currentColor;
}
.cates .cates_container .right_content {
  flex: 5;
}
.cates .cates_container .right_content .goods_group .goods_title {
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cates .cates_container .right_content .goods_group .goods_title .delimiter {
  color: #ccc;
  padding: 0 10rpx;
}
.cates .cates_container .right_content .goods_group .goods_list {
  display: flex;
  flex-wrap: wrap;
}
.cates .cates_container .right_content .goods_group .goods_list navigator {
  width: 33.33%;
  text-align: center;
}
.cates .cates_container .right_content .goods_group .goods_list navigator image {
  width: 50%;
}

js：

import {
  request
} from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime'
Page({

  data: {
    leftMenuList: [],
    rightContent: [],
    currentIndex: 0,
    scrollTop:0
  },
  Cates: [],
  onLoad: function (options) {
    const Cates=wx.getStorageSync("cates");
    if(!Cates){
      this.getCates();
    }else{
      if(Date.now()-Cates.time>1000*300){
        this.getCates();
      }else{
        this.Cates=Cates.data;
        let leftMenuList = this.Cates.map(v => v.cat_name);
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      }
    }
  },
  getCates() {
    request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/categories"
      })
      .then(res => {
        this.Cates = res.data.message;
        wx.setStorageSync("cates", {time:Date.now(),data:this.Cates});
        let leftMenuList = this.Cates.map(v => v.cat_name);
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      })
  },
  handleItemTap(e) {
    const {
      index
    } = e.currentTarget.dataset;
    let rightContent = this.Cates[index].children;
    this.setData({
      currentIndex: index,
      rightContent,
      scrollTop:0
    })
  }
})

四、下拉加载下一页

wxml：

<block wx:if="{{tabs[0].isActive}}">
    <view class="first_tab">
      <navigator class="goods_item" wx:for="{{goodsList}}" wx:key="goods_id"
        url="/pages/goods_detail/index?goods_id={{item.goods_id}}">
        <view class="goods_img_wrap">
          <image mode="widthFix"
            src="{{item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'}}">
          </image>
        </view>
        <view class="goods_info_wrap">
          <view class="goods_name">{{item.goods_name}}</view>
          <view class="goods_price">￥{{item.goods_price}}</view>
        </view>
      </navigator>
    </view>
  </block>
  <block wx:elif="{{tabs[1].isActive}}">1</block>
  <block wx:elif="{{tabs[2].isActive}}">2</block>

wxss:

.first_tab .goods_item {
  display: flex;
  border-bottom: 1px solid #ccc;
}
.first_tab .goods_item .goods_img_wrap {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.first_tab .goods_item .goods_img_wrap image {
  width: 70%;
}
.first_tab .goods_item .goods_info_wrap {
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.first_tab .goods_item .goods_info_wrap .goods_name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.first_tab .goods_item .goods_info_wrap .goods_price {
  color: var(--themeColor);
  font-size: 32rpx;
}

js.

import {
  request
} from "../../request/index.js";
import regeneratorRuntime, {
  async
} from '../../lib/runtime/runtime'
Page({
    goodsList: []
  },
  QueryParams: {
    query: "",
    cid: "",
    pagenum: 1,
    pagesize: 10
  },
  totalPages: 1,
  onLoad: function (options) {
    this.QueryParams.cid = options.cid;
    this.getGoodsList();
  },
  async getGoodsList() {
    const res = await request({
      url: "https://api-hmugo-web.itheima.net/api/public/v1/goods/search",
      data: this.QueryParams
    });
    const total = res.data.message.total;
    this.totalPages = Math.ceil(total / this.QueryParams.pagesize);
    this.setData({
      goodsList: [...this.data.goodsList, ...res.data.message.goods]
    })
  },
  onReachBottom() {
    if (this.QueryParams.pagenum >= this.totalPages) {
      wx.showToast({
        title: '没有下一页数据了',
      })
    } else {
      this.QueryParams.pagenum++;
      this.getGoodsList();
    }
  }
})

五、js文件中引入的两个import

index.js

export const request = (params) => {
    return new Promise((resolve, reject) => {
        wx.request({
            ...params,
            success: (result) => {
                resolve(result);
            },
            fail: (err) => {
                reject(err);
            }
        });
    })
}

另外一个是引入了es7语法，代码700多行，就不展示了，附个链接吧。

以上两种方法，也就跟着视频学习了一下，后期还需要花费大量时间继续学习，对代码进一步优化。