请选择 进入手机版 | 继续访问电脑版
12下一页
返回列表 发新帖

[其他] scroll-view问题,请解答

[复制链接]
jack tang 发表于 2022-1-25 13:55:07
<scroll-view class="page" scroll-y enable-back-to-top refresher-enabled refresher-triggered={refresherTriggered}  lower-threshold={800}>


threshold  无效,这个应该是距离多少的时候加载,在小程序上面完全失效,到底也不能触发   {800}   "800"  都不行

<scroll-view scroll-x show-scrollbar={false} class="diy_list">
在app
QQ截图20220125135207.jpg
是这样的,正常吧,可以左右滑动

但是在小程序就是这样的,所有的scroll-x都一样
QQ截图20220125135151.jpg


第一次用多端开发,也许技术有限,说实话还不如两次开发太累了

14条回复

jack tang 萌萌的小学生 742Y币
本帖最后由 jack tang 于 2022-1-25 14:20 编辑

这是常用组件,按理说这个算是低级的问题不会出现的,应该是我不会用,望指点下
lower-threshold={1800}  还是能看到效果的,但这个是滚动条 距离底部的距离还是页面内容距离底部的距离?我怎么感觉是内容的高度距离底部的高度
技术咨询-F 管理员 26903Y币
我们确认一下
杨永安 官方版主 619Y币
方便提供一下完整的代码吗
包括页面样式
jack tang · 2022-1-25 13:56这是常用组件,按理说这个算是低级的问题不会出现的,应该是我不会用,望指点下
lower-threshold={1800}  还是能看到效果的,但这个是滚动条 距离底部的距离还是页面内容距离底部的距离?我怎么感觉是内容的高度距离 ...
jack tang 萌萌的小学生 742Y币
  1. <template>
  2.         <view class="page">
  3.         <!--search and lisr_nav-->
  4.         <list-nav catnav={catnav} select={select} onchange_cart="onchange_cart"></list-nav>
  5.        
  6.                 <scroll-view class="scroll_left" scroll-y enable-back-to-top lower-threshold={800} onscrolltolower="onscrolltolower">
  7.                         <view class="list_con">

  8.                                 <view class="dan_list" style={'width:'+itemWidth+"px"} v-for="(d,i) in allDataList" data-id={d.id}
  9.                                         onclick="openwin">
  10.                                         <view class="tu">
  11.                                                 <image class="tu_img" style={'width:'+itemWidth+"px;height:"+(itemWidth+30)+"px"}
  12.                                                         src={d.thumbs[0]} thumbnail="false" mode="aspectFill"></image>
  13.                                                 <text class="tu_buy_txt">{d.sales}人已买</text>
  14.                                                 <image class="left_biao" src="../../**.**mon/video_4.png" mode="aspectFill"></image>
  15.                                         </view>
  16.                                         <text class="buy_title">{d.title}</text>
  17.                                 </view>


  18.                         </view>
  19.                 </scroll-view>
  20.                 <loading ajax_data={ajax_data}></loading>
  21.         </view>
  22. </template>
  23. <script>
  24. import $util from '../../utils/util.js'
  25. import '../../components/list-nav.stml'
  26. import '../../components/loading.stml'
  27. export default {
  28.         name: 'main2',
  29.         data() {
  30.                 return {
  31.                         allDataList: [],
  32.                         ajax_data: true,
  33.                         page: 1,
  34.                         haveMore: false,
  35.                         catnav:{parent:[],children:[]},
  36.                         select:{first:0,secend:0}

  37.                 }
  38.         },
  39.         computed: {
  40.                 itemWidth() {
  41.                         return Math.floor((api.winWidth - 30) / 2);
  42.                 }
  43.         },
  44.         methods: {
  45.                 apiready() {
  46.                         if ($util.isApp()) {
  47.                                 api.setStatusBarStyle({
  48.                                         style: 'light'
  49.                                 });
  50.                         }
  51.                         this.get_data();
  52.                         this.get_navcart();
  53.                 },

  54.                 /**
  55.                  * 生命周期函数--监听页面显示
  56.                  */
  57.                 onShow() {

  58.                 },

  59.                 onHide() {

  60.                 },
  61.                 get_data(loadMore) {
  62.                         let that = this;
  63.                         if (!loadMore) {
  64.                                 that.data.page = 1;
  65.                         }
  66.                         that.data.ajax_data = true;
  67.                         let cate = "";
  68.                         if(parseInt(that.data.select.secend) >=1){
  69.                         cate = that.data.select.secend;
  70.                         }else if(parseInt(that.data.select.first)>=1){
  71.                         cate = that.data.select.first;
  72.                         }
  73.                         var url = "xxxxx" + that.data.page+"&cate="+cate;
  74.                         $util.ajax({
  75.                                 path: url
  76.                         }, function (res, err) {
  77.                                 //console.log(JSON.stringify(res))
  78.                                 if (res && res.error == 0) {
  79.                                         let list = res.list;
  80.                                         if (!list || list =="") {
  81.                                                 list = []
  82.                                         }
  83.                                         //that.data.haveMore = list.length > 0;
  84.                                         if (list != "" && list.length > 0) {
  85.                                                 if (loadMore) {
  86.                                                         //console.log(JSON.stringify(list))
  87.                                                         that.data.allDataList = that.data.allDataList.concat(list);
  88.                                                 } else {
  89.                                                         that.data.allDataList = list;
  90.                                                 }
  91.                                                 that.data.page += 1;
  92.                                                 that.data.haveMore = true;
  93.                                         } else {
  94.                                                 that.data.haveMore = false;
  95.                                         }
  96.                                 }
  97.                                 that.data.ajax_data = false;
  98.                         });
  99.                 },
  100.                 get_navcart(){
  101.                 let that = this;
  102.                 var url = "&r=goods.get_category";
  103.                         $util.ajax({
  104.                                 path: url
  105.                         }, function (res, err) {
  106.                                 if (res && res.error == 0) {
  107.                                         let list = res.allcategory;
  108.                                         that.data.catnav = list;
  109.                                         //console.log(JSON.stringify(list.children))

  110.                                 }
  111.                         });
  112.                 },
  113.                 onscrolltolower() {
  114.                         if (this.data.haveMore && !this.data.ajax_data) {
  115.                                 this.get_data(true);
  116.                         }
  117.                 },
  118.                 openwin(e) {
  119.                         let id = e.currentTarget.dataset.id;
  120.                         $util.openWin({
  121.                                 name: 'video-' + id,
  122.                                 url: '../video/video.stml',
  123.                                 title: '商品详情',
  124.                                 pageParam: {
  125.                                         id: id
  126.                                 }
  127.                         });
  128.                 },
  129.                 onchange_cart(e){
  130.                 var type = e.detail.type;
  131.                 var id = e.detail.id;
  132.                 if(type == 1){
  133.                 this.data.select.first = id;
  134.                 this.data.select.secend = "";
  135.                 }else{
  136.                 this.data.select.secend = id;
  137.                 }
  138.                 this.get_data();
  139.                 },


  140.                 /**
  141.                  * 用户点击右上角分享
  142.                  */
  143.                 onShareAppMessage: function () { }
  144.         }
  145. }
  146. </script>
  147. <style>
  148. .page {
  149.         background-color: #eeeeee;
  150. }
  151. .list_con {
  152.         flex-direction: row;
  153.         padding: 10px;
  154.         flex-wrap: wrap;
  155.         justify-content: space-between;
  156.         background: #ffffff;
  157.         border-radius: 5px;
  158. }
  159. .dan_list {
  160.         font-size: 12px;
  161.         margin-bottom: 10px;
  162. }
  163. .tu {
  164.         position: relative;
  165. }
  166. .tu_img {
  167.         border-radius: 5px;
  168. }
  169. .tu_buy_txt {
  170.         position: absolute;
  171.         left: 0;
  172.         bottom: 0;
  173.         background: rgba(0, 0, 0, 0.397);
  174.         color: #ffffff;
  175.         font-size: 12px;
  176.         border-radius: 0 5px 0 0;
  177.         padding: 0 3px;
  178. }
  179. .buy_title {
  180.         overflow: hidden;
  181.         text-overflow: ellipsis;
  182.         white-space: nowrap;
  183.         line-height: 30px;
  184.         font-size: 12px;
  185. }
  186. .left_biao {
  187.         width: 30px;
  188.         height: 22px;
  189.         position: absolute;
  190.         left: 10px;
  191.         top: 10px;
  192.         border-radius: 5px;
  193.         opacity: 0.7;
  194. }

  195. </style>
复制代码
杨永安 · 2022-1-25 14:47方便提供一下完整的代码吗
包括页面样式
杨永安 官方版主 619Y币
好像还缺两个组件和一个js哦

jack tang 萌萌的小学生 742Y币
errrrrr
jack tang 萌萌的小学生 742Y币

<template>
<view>
                <!--search-->
                <view class="search_container">
                        <view class="search_box">
                                <image class="search_img" src="../../images/main1/search.png"></image>
                                <input class="search_int" type="text" placeholder="请输入搜索内容" confirm-type="search"
                                        oninput="onInput" onconfirm="search"></input>
                        </view>
                        <text class="search_btn" onclick="cancel">搜索</text>
                </view>

                <!--parent-->
                <view style={"height:"+(this.props.select.first==0?"50px":"100px")}>
                        <scroll-view class="sort" scroll-x scroll-y="false" scroll-enabled bounces show-scrollbar="false">
                                <text class={this.props.select.first==0 ?'catnav_s':'catnav'} style="height:50px;line-height: 50px;" @click="change_cart(0,1)">热门推荐</text>
                                <text v-for="(d,i) in this.props.catnav.parent" style="height:50px;line-height: 50px;" class={this.props.select.first==d.id ?'catnav_s':'catnav'} data-id={d.id}
                                        @click="change_cart(d.id,1)">{d.name}</text>
                        </scroll-view>
                        <!--children -->
                        <scroll-view class="sort" scroll-x scroll-y="false" scroll-enabled bounces show-scrollbar="false"
                                v-if="this.props.select.first !=0 && this.props.catnav.children[String(this.props.select.first)].length>=1">
                                <text v-for="(d,i) in this.props.catnav.children[String(this.props.select.first)]" style="height:30px;line-height: 30px;" class={this.props.select.secend==d.id
                                        ?'catnav_s':'catnav'} data-id={d.id} @click="change_cart(d.id,2)">{d.name}</text>
                        </scroll-view>
                </view>
        </view>
</template>
<script>
export default {
        name: 'list-nav',
    methods: {
    change_cart(id,type){
    this.fire('change_cart', {id:id,type:type});
    }
    }
}
</script>
<style scoped>
/* search */
.search_container {
        flex-direction: row;
        align-items: center;
        height: 44px;
        background-color: #fff;
}
.search_box {
        flex-direction: row;
        align-items: center;
        flex: 1;
        height: 30px;
        background-color: #f5f5f5;
        border-radius: 15px;
        margin-left: 15px;
}
.search_img {
        width: 12px;
        height: 12px;
        margin-left: 13px;
        margin-right: 6px;
}
.search_int {
        flex: 1;
        font-size: 12px;
        color: #333;
        background-color: transparent;
        border: none;
}
.search_btn {
        color: #666;
        font-size: 12px;
        padding: 0 15px;
}
.sort {
        flex-direction: row;
        overflow: hidden;
        padding: 0;
}
.catnav {
        padding: 0 10px;
        font-size: 12px;
        color: rgb(80, 80, 80);
        font-weight: normal;
}
.catnav_s {
        font-weight: bold;
        padding: 0 10px;
        font-size: 12px;
        color: #ff5555;
      
}
</style>




上面那段代码是下方的列表是scroll-y的,在微信上面不能触发分页,上面代码中用的list-nav模板组件就是一个可以横向滚动的代码,但是在小程序上面是竖排排列的
杨永安 · 2022-1-25 15:21好像还缺两个组件和一个js哦
jack tang 萌萌的小学生 742Y币
横向滚动的组件list-nav发上来了   loading组件就是一个显示正在加载的东西,util.js只用了请求跟打开窗口 这个有关系吗?如果有的话 我们可以私聊讨论下下
杨永安 · 2022-1-25 15:21好像还缺两个组件和一个js哦
杨永安 官方版主 619Y币
util没有影响,提供代码只是为了更快还原现场。

据测试是在长尺寸列表的情况下,计算规则稍微有点问题,问题已经确认,会尽快修复。
jack tang · 2022-1-25 15:26横向滚动的组件list-nav发上来了   loading组件就是一个显示正在加载的东西,util.js只用了请求跟打开窗口 这个有关系吗?如果有的话 我们可以私聊讨论下下
...
12下一页
您需要登录后才可以回帖 登录

本版积分规则