测试版

pages/component/commonComponents/goodsList.vue

@@ -0,0 +1,133 @@
+<template>
+  <view style="width: 100%; height: 100%">
+    <scroll-view  @scrolltolower="lower" scroll-y="true" class="scroll-Y" v-if="dataList.length > 0">
+      <view
+        @click="gotoDetail(item)"
+        class="scroll-view-item list_item"
+        v-for="(item, index) in dataList"
+        :key="item.id"
+        :index="index"
+        style="align-items: flex-start"
+      >
+        <view
+          :class="['titleItem', '']"
+          :style="`width:${isNoIcon ? '100%' : 'calc(100% - 30rpx)'}`"
+        >
+          <slot name="leftSlot" :row="item" :item="item" :index="index"> </slot>
+
+          <template v-if="isCondition">
+            <slot name="labelSlot" :row="item"></slot>
+          </template>
+          <template v-else>
+            {{ item[label] }}
+          </template>
+
+          <slot name="rightSlot" :row="item"></slot>
+        </view>
+        <image
+          v-if="!isNoIcon"
+          src="@/static/icon/icon_right.png"
+          class="rightArrow"
+          style=""
+        ></image>
+      </view>
+    </scroll-view>
+    <u-divider v-else text="暂无数据哦~"></u-divider>
+  </view>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  props: ["dataList", "label", "isCondition", "isNoIcon","pagination"],
+  data() {
+    return {};
+  },
+  onLoad() {},
+  onHide() {
+    // this.showSearchList = false
+    // this.searchList = []
+  },
+  computed: {
+    ...mapState(["userInfo"]),
+  },
+  methods: {
+    lower(){
+      this.$emit('lower')
+    },
+    gotoDetail(data) {
+      console.log("index at line 53:", data);
+
+      this.$emit("hancleClick", data);
+    },
+  },
+  onBackPress() {
+    // #ifdef APP-PLUS
+    plus.key.hideSoftKeybord();
+    // #endif
+  },
+  components: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.list_item {
+  width: auto !important;
+    float: left !important;
+  padding: 20rpx 30rpx;
+  box-sizing: border-box;
+  // border-bottom: 1rpx solid #e0e0e0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  //   position: relative;
+}
+.list_item :last-child(1) {
+  border-bottom: none;
+}
+.scroll-view-item:nth-child(2n-1) {
+  background-color: #f5f5f5 !important;
+}
+
+.rightArrow {
+  width: 30rpx;
+  height: 30rpx;
+  //   position: absolute;
+  //   right: 30rpx;
+  //   top: 20rpx;
+}
+
+.scroll-Y {
+  height: 100%;
+}
+
+.scroll-view_H {
+  white-space: nowrap;
+  width: 100%;
+}
+
+.scroll-view-item {
+  // height: 300rpx;
+  // line-height: 300rpx;
+  // text-align: center;
+  // font-size: 36rpx;
+}
+
+.scroll-view-item_H {
+  display: inline-block;
+  width: 100%;
+  // height: 300rpx;
+  // line-height: 300rpx;
+  // text-align: center;
+  // font-size: 36rpx;
+}
+.titleItem {
+  width: calc(100% - 30rpx);
+}
+/deep/.scroll-view-item:nth-child(2n-1) {
+  background-color: transparent !important;
+}
+.list_item:last-child{
+  border-bottom: none !important;
+}
+</style>