lxui-uni 0.1.1 → 0.1.2

package/.env

@@ -0,0 +1 @@
+NPM_TOKEN=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

package/README.md

@@ -9,3 +9,6 @@ npm install lxui-uni -S
 ### 文档地址：
 
 https://blog.csdn.net/qq_51091386/article/details/138125947
+### 2025年11月04日 更新内容
+
+1. 优化组件lx-operate-bottom显示层级问题。

package/components/lx-list/lx-list.vue

@@ -13,14 +13,15 @@
  * @version: V1.0.1
  */
 import { LoadData } from '../../libs/hooks/useListLoadClass'
-import { debounce } from '../../libs/util'
 import { toRefs, ref } from 'vue';
 import lxListState from '../lx-list-state/lx-list-state.vue'
 interface listPropsInt {
     api: Function
     afterLoadData?: Function
     options?: any
-    listType?: 'default' | 'scrollView'
+    listType?: 'default' | 'scrollView',
+    // 列表数据字段
+    listDataField?: string
 }
 
 // 接收传值
@@ -29,23 +30,18 @@ const props = withDefaults(defineProps<listPropsInt>(), {
     api: () => ({}),
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     options: {},
-    listType: 'default'
+    listType: 'default',
+    listDataField: 'items'
 })
 let { options, api, afterLoadData } = toRefs(props)
-// console.log('props', props.options, options.value)
 
 // 分页相关
 let { list, isLoading, isEmpty, isNoData, setParams, LoadMore } = LoadData({
     api: api.value,
     afterLoadData: afterLoadData?.value,
-    options: options.value
+    options: options.value,
+    listDataField: props.listDataField
 })
-// 搜索相关
-// const inputTxt = ref('')
-// const inputChange = debounce(() => {
-//     console.log('input change')
-//     setParams({ search: inputTxt.value })
-// })
 
 // 用于父组件设置额外的参数（选项卡切换的时候使用）--> isClear true 清空列表需测试
 const setListParams = (obj: any, isClear = true) => {
@@ -53,9 +49,7 @@ const setListParams = (obj: any, isClear = true) => {
         search?: string
         [key: string]: any
     }>({})
-    // if (props.isNeedSearch) {
-    //     param.value.search = inputTxt.value
-    // }
+
     param.value = { ...obj }
     setParams({ ...param.value }, isClear)
 }

package/components/lx-operate-bottom/lx-operate-bottom.vue

@@ -77,6 +77,7 @@ const cancelClick = () => emit('cancel')
     padding-right: 36rpx;
     padding-top: 10rpx;
     // box-sizing: border-box;
+    z-index: 99;
     .bottom_left_box {
         // max-width: 70%;
         // 普通文本

package/components/lx-submit-btn/lx-submit-btn.vue

@@ -35,14 +35,18 @@ const emit = defineEmits(['submit'])
     padding: 0 28rpx;
     /* 兼容 iOS < 11.2 */
     padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: max(constant(safe-area-inset-bottom, 10rpx), 10rpx);
     /* 兼容 iOS >= 11.2 */
     padding-bottom: env(safe-area-inset-bottom);
+    padding-bottom: max(env(safe-area-inset-bottom, 10rpx), 10rpx);
     padding-top: 10rpx;
     position: fixed;
-    bottom: 10rpx;
+    // bottom: 10rpx;
+    bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 100%;
+    background-color: #fff;
 
     .submit_btn {
         margin: 0 auto;

package/libs/hooks/useListLoadClass/index.ts

@@ -5,108 +5,118 @@
  * @date: 2023-07-08 08:55:52
  * @version: V1.0.0
  */
-import { reactive, ref, computed } from "vue"
-import { onReachBottom } from "@dcloudio/uni-app"
+import { reactive, ref, computed } from 'vue'
+import { onReachBottom } from '@dcloudio/uni-app'
 
 class LoadDataClass {
-    // 请求参数
-    static queryParams = reactive({
-        page: 1,
-        limit: 10
-    })
-    // 列表数据
-    list = ref<any[]>([])
-    total = ref(0)
-    // 前置处理方法
-    afterLoadData: Function | undefined
-    // 请求方法
-    Query: Function
-    // 加载状态参数
-    isLoading = ref(false)
-    // 无更多数据了
-    isNoData = computed(() => {
-        if (LoadDataClass.queryParams.page * LoadDataClass.queryParams.limit >= this.total.value) {
-            return true
-        } else {
-            return false
-        }
-    })
-    // 显示暂无数据
-    isEmpty = computed(() => {
-        if (this.total.value === 0) {
-            return true
-        } else {
-            return false
-        }
+  // 请求参数
+  static queryParams = reactive({
+    page: 1,
+    limit: 10
+  })
+  // 列表数据
+  list = ref<any[]>([])
+  total = ref(0)
+  // 列表返回字段
+  listDataField = ref<string>('items')
+  // 前置处理方法
+  afterLoadData: Function | undefined
+  // 请求方法
+  Query: Function
+  // 加载状态参数
+  isLoading = ref(false)
+  // 无更多数据了
+  isNoData = computed(() => {
+    if (LoadDataClass.queryParams.page * LoadDataClass.queryParams.limit >= this.total.value) {
+      return true
+    } else {
+      return false
+    }
+  })
+  // 显示暂无数据
+  isEmpty = computed(() => {
+    if (this.total.value === 0) {
+      return true
+    } else {
+      return false
+    }
+  })
+
+  constructor(
+    apiFunctions: Function,
+    afterLoadData?: Function,
+    options: any = {},
+    listDataField: string = 'items'
+  ) {
+    this.queryParamsReset()
+    this.Query = apiFunctions
+    this.afterLoadData = afterLoadData
+    this.listDataField.value = listDataField || 'items'
+    // console.log('options', options)
+    // 存在额外参数拼接
+    this.setParams(options)
+  }
+  // 加载数据
+  LoadData = async () => {
+    uni.showLoading({
+      title: '加载中...'
     })
+    this.isLoading.value = true
+    const res = await this.Query(LoadDataClass.queryParams)
+    this.afterLoadData && this.afterLoadData(res)
+    this.total.value = res.data.total
+    this.list.value = this.list.value.concat(res.data[this.listDataField.value])
 
-    constructor(apiFunctions: Function, afterLoadData?: Function, options: any = {}) {
-        this.queryParamsReset()
-        this.Query = apiFunctions
-        this.afterLoadData = afterLoadData
-        // console.log('options', options)
-        // 存在额外参数拼接
-        this.setParams(options)
+    uni.hideLoading()
+    uni.stopPullDownRefresh()
+    this.isLoading.value = false
+  }
+  /**
+   * 添加额外参数刷新
+   * @param options: 参数
+   * @param isClear: 是否清空数据 false
+   */
+  setParams = (options: any, isClear: boolean = false) => {
+    if (isClear) {
+      this.queryParamsReset()
+    } else {
+      LoadDataClass.queryParams.page = 1
     }
+    this.list.value = []
+    console.log('setParams', options);
+    
+    LoadDataClass.queryParams = Object.assign(LoadDataClass.queryParams, options)
     // 加载数据
-    LoadData = async () => {
-        uni.showLoading({
-            title: '加载中...'
-        })
-        this.isLoading.value = true
-        const res = await this.Query(LoadDataClass.queryParams)
-        this.afterLoadData && this.afterLoadData(res)
-        this.total.value = res.data.total
-        this.list.value = this.list.value.concat(res.data.items)
-
-        uni.hideLoading()
-        uni.stopPullDownRefresh()
-        this.isLoading.value = false
-    }
-    /**
-     * 添加额外参数刷新
-     * @param options: 参数
-     * @param isClear: 是否清空数据 false
-     */
-    setParams = (options: any, isClear: boolean = false) => {
-        if (isClear) {
-            this.queryParamsReset()
-        } else {
-            LoadDataClass.queryParams.page = 1
-        }
-        this.list.value = []
-        LoadDataClass.queryParams = Object.assign(LoadDataClass.queryParams, options)
-        // 加载数据
-        this.LoadData()
-    }
-    // 加载更多
-    LoadMore = () => {
-        if (this.isNoData.value || this.isLoading.value) return // 无数据或者加载中不进行加载
-        LoadDataClass.queryParams.page += 1
-        this.LoadData()
-    }
-    // 重置参数
-    queryParamsReset = () => {
-        LoadDataClass.queryParams = reactive({
-            page: 1,
-            limit: 10
-        })
-    }
+    this.LoadData()
+  }
+  // 加载更多
+  LoadMore = () => {
+    if (this.isNoData.value || this.isLoading.value) return // 无数据或者加载中不进行加载
+    LoadDataClass.queryParams.page += 1
+    this.LoadData()
+  }
+  // 重置参数
+  queryParamsReset = () => {
+    LoadDataClass.queryParams = reactive({
+      page: 1,
+      limit: 10
+    })
+  }
 
-    /**
-     * 刷新
-     * @param isClear: 是否清空数据
-     */
-    ReLoad = (isClear: boolean = false) => {
-        this.isLoading.value = false
-        this.list.value = []
-        if (isClear) {
-            this.queryParamsReset()
-        } else {
-            LoadDataClass.queryParams.page = 1
-        }
-        this.LoadData()
+  /**
+   * 刷新
+   * @param isClear: 是否清空数据
+   */
+  ReLoad = (isClear: boolean = false) => {
+    this.isLoading.value = false
+    this.list.value = []
+    if (isClear) {
+      this.queryParamsReset()
+    } else {
+      LoadDataClass.queryParams.page = 1
     }
+    this.LoadData()
+  }
 }
 /**
  * 分页加载数据方法
@@ -115,31 +125,36 @@ class LoadDataClass {
  * @returns
  */
 interface LoadDataInt {
-    api: Function
-    afterLoadData?: Function
-    options?: any
-    isNeedReachBottom?: boolean
+  api: Function
+  afterLoadData?: Function
+  options?: any
+  isNeedReachBottom?: boolean
+  listDataField?: string
 }
 
-export function LoadData({ api, afterLoadData, options, isNeedReachBottom = true }: LoadDataInt) {
-    const data = new LoadDataClass(api, afterLoadData, options)
+export function LoadData({
+  api,
+  afterLoadData,
+  options,
+  isNeedReachBottom = true,
+  listDataField = 'items'
+}: LoadDataInt) {
+  const data = new LoadDataClass(api, afterLoadData, options, listDataField)
 
-    // 下拉加载 
-    if (isNeedReachBottom) {
-        onReachBottom(() => {
-            console.log('onReachBottom')
-            data.LoadMore()
-        })
-    }
+  // 下拉加载
+  if (isNeedReachBottom) {
+    onReachBottom(() => {
+      data.LoadMore()
+    })
+  }
 
-    return {
-        list: data.list,
-        isLoading: data.isLoading,
-        isNoData: data.isNoData,
-        isEmpty: data.isEmpty,
-        ReLoad: data.ReLoad,
-        setParams: data.setParams,
-        LoadMore: data.LoadMore
-    }
+  return {
+    list: data.list,
+    isLoading: data.isLoading,
+    isNoData: data.isNoData,
+    isEmpty: data.isEmpty,
+    ReLoad: data.ReLoad,
+    setParams: data.setParams,
+    LoadMore: data.LoadMore
+  }
 }
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lxui-uni",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "快速构建页面",
   "author": "2399270194@qq.com",
   "license": "MIT",

package/theme.scss

@@ -51,8 +51,6 @@ image {
     background-color: #f2f2f2;
 }
 
-
-
 // 弹框公用
 .dialog_content_lx {
     .dialog_icon_lx {