微信小程序 van-sticky + swiper + scroll-view + DropdownMenu + TreeSelect 实现顶部固定、可滑动/滚动/点击切换、选择地区、刷新、分页加载

原创

已于 2023-08-22 11:35:48 修改 · 置顶 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #DropdownMenu #Sticky #swiper #TreeSelect #scroll-view #Tab切换

于 2023-08-22 11:30:58 首次发布

本文介绍了如何在微信小程序中结合van-sticky、swiper、scroll-view、DropdownMenu和TreeSelect，实现顶部固定效果、滑动切换、点击选择地区以及刷新和分页加载功能。详细阐述了js、wxml和wxss的实现代码结构。

一、如图:

二、js:

import {
  getArea,
  getProductList
} from "../../../../../api/dsxapi";
const ui = require("../../../../../utils/ui");
Page({
  data: {
    navData: ['法律', '财税', '投融资', '知识产权', '企业产业链', '园区招商', '综合业务'],
    currentTab: 0, //标签下标
    navScrollLeft: 0,
    itemTitle: "服务地区",
    mainActiveIndex: 0,
    activeId: null,
    items: null,
    province: '', //省
    provinceId: null, //省份id
    marketId: null, //市id
    ProductList: [], //产品列表
    pages: 0,
    current: 1,
    top: 0
  },
  onLoad(options) {
    // 滚动
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          windowWidth: res.windowWidth
        })
      },
    })
  },
  onShow() {
    this.ObtainArea()
    this.ObtainProductList(this.data.current)
  },

  //获取地区
  ObtainArea() {
    getArea().then((res) => {
      let ress = res.data.map((item) => {
        return {
          text: item.areaName,
          id: item.areaId,
          children: [{
              text: '全部',
              id: -1
            },
            ...item.children.map((items) => {
              return {
                text: items.areaName,
                id: items.areaId
              }
            })
          ]
        }
      })
      ress.unshift({
        text: "全国"
      });
      this.setData({
        items: ress
      })
    }).catch(function (imError) {})
  },

  //获取产品列表
  ObtainProductList(current) {
    let params
    let category
    if (this.data.currentTab == 0) {
      category = 100621
    } else if (this.data.currentTab == 1) {
      category = 100622
    } else if (this.data.currentTab == 2) {
      category = 100623
    } else if (this.data.currentTab == 3) {
      category = 100624
    } else if (this.data.currentTab == 4) {
      category = 100625
    } else if (this.data.currentTab == 5) {
      category = 100626
    } else if (this.data.currentTab == 6) {
      category = 100627
    }
    if (this.data.marketId !== null) {
      params = {
        category: category, //标签id
        provinceId: this.data.provinceId, //省id
        cityId: this.data.marketId, //市id
        current: current,
        searchId: 11,
        size: 100,
      };
    } else {
      params = {
        category: category, //标签id
        current: current,
        size: 20,
      };
    }
    getProductList(params).then((res) => {
      let ProductList
      if (res.data.current == 1) {
        ProductList = res.data.records;
        ProductList.forEach((item, index) => {