请选择 进入手机版 | 继续访问电脑版

[问题求助] 微信小程序显示异常

[复制链接]
APP爱啪啪 发表于 2021-11-7 16:10:08

各位大神
手机侧显示正常,
但小程序无法完全显示。
相关代码
<template name='c-course-list'>
  <view class="page">
    <a-header :left-icon="leftIcon">管家帮_家庭服务</a-header>
    <!--安卓判断-->
    {api.systemType==='android'?      
      <view class="a-tabs"  style="flex-flow: row nowrap;">
        <scroll-view class="a-tabs__nav">
          <view class="a-tabs__nav--item" onClick={this.handleNavClick.bind(this,index)}
                style="flex:1;height: 44px;justify-content: center;align-items: center;margin:8px;"
                v-for="(it,index) in course_category">
            <text :class="'a-tabs__nav-text'
              + (index===this.data.tabsParam.current?' a-tabs__nav-text---active':'')">
              {it.name}
            </text>
            <view :class="index===this.data.tabsParam.current?'a-tabs__nav--line-active':'a-tabs__nav--line'"></view>
          </view>
        </scroll-view>
        <!--
      {this.data.dataList[tabsParam.current]==='-'?
          <b-notice title="正在加载中" icon="../../images/icon__notice--loading.gif"/>
          :
          (
            this.data.dataList[tabsParam.current].length?
         -->
              <list-view id="listView" class="main" enable-back-to-top onscrolltolower={this.onscrolltolower} >
                <cell @click="itemClick">
                  <view class="course-tabs__item--list__item">
                    <img _slot="content" class="course-tabs__item--list__item--cover" :src="item.cover"/>
                    <view _slot="footer" class="course-item__footer a-card__footer" >
                      <view class="course-item__info" >
                        <text class="course-item__info--title"  >{{ item.title }}</text>
                        <!--
                        <text class="course-item__info--price"  >{{ item.class_hour + '工时 / ' }}</text>
                        <text class="course-item__info--price" >{{ item.price + '元' }}</text>
                        -->
                        <text class="course-item__info--price">{{ '参考:'+item.class_hour }}工时/{{ item.price }}元</text>

                      </view>
                      <!--
                      <text class="course-tabs__item--list__item--introduction" >{{ item.introduction }}</text>
                        -->
                      </view>

                  </view>

                </cell>
              </list-view>
          <!--
            :
            <b-notice title="暂无数据哦" icon="../../images/icon__notice--empty.png"/>
          )}
          -->

        { this.data.dataList[tabsParam.current]==='-'&&
        <b-notice title="正在加载中" icon="../../images/icon__notice--loading.gif"/>
        }
        { this.data.dataList[tabsParam.current].length===0&&
        <b-notice title="暂无数据哦" icon="../../images/icon__notice--empty.png"/>
        }

      </view>

    :
<!-- 应该是jsx中条件表达式( true ? <text>真</text> : <text>假</text>)-->

    <a-tabs class="course-tabs" :param="tabsParam" onChange="tabChange">
      <a-tab class="course-tabs__item" :title="it.name"
        v-for="it in course_category">
        {this.data.dataList[tabsParam.current]==='-'?
          <b-notice title="正在加载中" icon="../../images/icon__notice--loading.gif"/>
        :
        (
        this.data.dataList[tabsParam.current].length?
        <view class="course-tabs__item--list">
          <a-card v-for="item in dataList[tabsParam.current]" class="course-tabs__item--list__item"
                  @click="goto(item)">
            <img _slot="content" class="course-tabs__item--list__item--cover" :src="item.cover"/>
            <view _slot="footer" class="course-item__footer">
              <view class="course-item__info">
                <text class="course-item__info--title">{{ item.title }}</text>
                <text class="course-item__info--price">{{ '参考:'+item.class_hour }}工时/{{ item.price }}元</text>
              </view>
              <!--<text class="course-tabs__item--list__item--introduction">{{ item.introduction }}</text>-->
            </view>
          </a-card>
        </view>
        <!-- : -->
        :
        <b-notice title="暂无数据哦" icon="../../images/icon__notice--empty.png"/>
        )}
      </a-tab>

    </a-tabs>
    <!--  安卓判断-->
    }
  </view>
</template>
<script>
import AHeader from "./a-header.stml";
import ATab from "./a-tab.stml";
import ATabs from "./a-tabs.stml";
import ACard from "./a-card.stml";
import {GET} from "../script/req";
import BNotice from "./b-notice.stml";

export default {
  name: "c-course-list",
  components: {BNotice, ACard, AHeader, ATabs, ATab},
  installed() {
    this.getCourseData();
  },
  data() {
    console.log(['data', api.pageParam.id])
    const course_category = JSON.parse(api.getPrefs({
      sync: true,
      key: 'course_category'
    }));


    let current = 0;
    let leftIcon = false; // 头部返回按钮
    if (api.pageParam.id) {
      leftIcon = true;
      for (let i = 0; i < course_category.length; i++) {
        if (course_category[i].id === api.pageParam.id) {
          current = i;
          break;
        }
      }
    }

    return {
      leftIcon,
      tabsParam: {
        current: current,
        type: 'line',
        color: 'red'
      },
      course_category,
      dataList: new Array(course_category.length).fill('-')
    };
  },
  methods: {
    getCourseData() {
      if (this.data.dataList[this.data.tabsParam.current] === '-') {

        // api.toast({
        //   msg: '开始加载' + this.data.tabsParam.current,
        //   location: 'top'
        // })

        const currentItem = this.data.course_category[this.data.tabsParam.current];
        GET('i_alls/getCoursesList?categoryId=' + currentItem.id).then(data => {
          this.data.dataList[this.data.tabsParam.current] = data;
          //console.log(doT.template($api.byId('template').innerHTML)); 把这个函数复制出来,再带入参数,就能看到哪行报错
          // api.toast({
          //   msg: '加载完成' + this.data.tabsParam.current,
          //   location: 'middle'
          // })

          if (api.systemType === 'android') {
              var listView = document.getElementById('listView');
              listView.load({data});
            }
          })
      } else {
        // api.toast({  
        //   msg: '已加载过' + this.data.tabsParam.current
        // })

         if (api.systemType === 'android') {
          const listView = document.getElementById('listView');
          const data = this.data.dataList[this.data.tabsParam.current];
          listView.load({data});
        }
      }
    },
    tabChange(e) {
      console.log(e);
      this.getCourseData();
    },
    goto(pageParam) {
      api.openWin({
        name: 'course-detail',
        url: '../course-detail/course-detail.stml',
        pageParam
      })
    }, itemClick({target: {index}}) {
      this.goto(this.data.dataList[this.tabsParam.current][index]);
    },
    handleNavClick(index) {
      this.data.tabsParam.current = index;
      this.getCourseData();
    }
  }
};
</script>
<style>
.page {
  height: 100%;
  background-color: #f0f0f0;
}


.a-tabs__nav {
  flex-shrink: 0; /*防止被压缩*/
  background: #FFF;
  border: 1px solid #f3f3f3;
  width:85px;
}


    .main {
        width: 100%;
        height: 100%;
    }

/*无效*/
.course-tabs__item--list {      
    flex:1;
    width: 100%;
    /*height: 100%;*/
    height: 1000px;
    }


.course-tabs__item--list__item {
  margin: 10px 5px;
  background: #FFF;
  box-shadow: 0 2px 6px #f3f3f3;
  border: 1px solid #f3f3f3;
  border-radius: 4px;

  width: 100%;
        height: 100%;
}

.course-tabs__item--list__item--cover {
  width: 100%;
  height: 194px; /*194px*/

}

.course-tabs__item--list__item--introduction {
  margin-top: 15px;
  white-space: pre-wrap;
  font-size: 14px;
  color: #666666;
}

.course-item__info {
  flex-flow: row nowrap;
  justify-content: space-between; /*标题与参考分开表示*/
}

.course-item__info--title {
  /*flex: 1;
  color: #333;*/
  font-size: 16px;
  font-weight: bold;
  color: #030a4271;
  justify-content: flex-start;
}

.course-item__info--price {
  font-size: 16px;
  color: #FA6400;
  font-weight: bold;
  justify-content: flex-end;
}

.a-card__footer {
  padding: 15px 10px;
}

.a-tabs__nav-text {
  color: #666;
  font-size: 16px;
  font-weight: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.a-tabs__nav-text---active {
  color: #FA6400;
  font-weight: bold;
}


</style>



推测是下记CSS的问题,可是用了固定值也无效。
/*无效*/
.course-tabs__item--list {      
    flex:1;
    width: 100%;
    /*height: 100%;*/
    height: 1000px;
    }



小程序表示不完全

小程序表示不完全

手机正常

手机正常

2条回复

技术支持-F 管理员 24811Y币
我们看看
APP爱啪啪 新手上路 79Y币
没人回复自己顶一下
您需要登录后才可以回帖 登录

本版积分规则