scroll-view滚动问题

<template>
<scroll-view class="htmler_sv" :scroll-y="!psy_ons" :scroll-top="page_nu" @scroll="page_cho" @scrolltolower="to_lower">
<!-- 导航 -->
<view class="sn_box"></view>
<view class="sn_box sn_con">
<navigator class="sn_backs" hover-class="none" open-type="navigateBack">
<image class="sn_imgs" src="/static/3.bul/fanhui.png" mode=""></image>
</navigator>
<view class="sn_tit">{{ index_ajax.name || "更多课程" }}</view>
</view>

<!-- 内容 -->  
<view class="htmler">  
  <!-- 搜索 -->  
  <view class="search">  
    <image class="search_imgs" src="/static/1.index/search.png" mode=""></image>  
    <input type="text" name="" id="" class="search_inps" placeholder="请输入课程名称" placeholder-class="ph" v-model="inps"  
      @confirm="to_s" />  
    <view class="search_line"></view>  
    <view class="search_btn" @tap="to_s">确定</view>  
  </view>  

  <!-- banner -->  
  <swiper class="bas" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="999999">  
    <block v-for="(item, index) in index_ajax.banner" :key="index">  
      <swiper-item>  
        <image :src="api_url + item.url" mode=""></image>  
      </swiper-item>  
    </block>  
  </swiper>  

  <!-- 排序 -->  
  <view id="orders" class="orders">  
    <block v-for="(item, index) in ol" :key="index">  
      <view :class="`orders_item ${ol_ons == item ? 'orders_ons' : ''}`" @tap="o_do" :data-txt="item">  
        <text>{{ item }}</text>  
        <block v-if="index == 1">  
          <view class="orders_line"></view>  
          <image class="orders_imgs" :src="ol_imgs[ol_keys]" mode=""></image>  
        </block>  
      </view>  
    </block>  
  </view>  

  <!-- 筛选 -->  
  <scroll-view id="cho" class="cho" :scroll-x="!sx_ons" :scroll-left="cho_nu" @scroll="sv_cho">  
    <text class="cho_line"></text>  
    <block v-for="(item, index) in cho_types" :key="index">  
      <view :id="'cho_item' + index" :class="[  
        'cho_item',  
        item.vs && item.vs != item.names ? 'cho_sels' : '',  
        item.ons ? 'cho_ons' : '',  
      ]" @tap="tog_cho" :data-ks="index">  
        <text class="cho_txt">{{ item.vs || item.names }}</text>  

        <block v-if="item.ons">  
          <image class="cho_imgs" src="/static/3.bul/cho_shangla.png" mode=""></image>  
        </block>  
        <block v-else>  
          <image class="cho_imgs" src="/static/3.bul/cho_xiala.png" mode=""></image>  
        </block>  
      </view>  
    </block>  
    <text class="cho_line"></text>  
  </scroll-view>  
  <view>  
    <block v-for="(item, index) in cho_types" :key="index">  
      <uni-popup ref="popup_cho" type="top" @tap.stop="tog_cho" :data-ks="index" @touchmove.stop="">  
        <view class="cho_p" @tap.stop="">  
          <scroll-view class="cho_sv" :scroll-y="true">  
            <block v-for="(item1, index1) in baseAjax[item.keys]" :key="index1">  
              <view :class="[  
                'cho_one',  
                item.vs1 == item1.label ? 'cho_one_on' : '',  
                item1.children && item1.children.length  
                  ? 'cho_one_c'  
                  : '',  
              ]" @tap.stop="c_cho" :data-ks="index" :data-label1="item1.label" :data-value="item1.value"  
                :data-c="item1.children">  
                {{ item1.label }}  
                <block v-if="item1.children && item1.children.length">  
                  <view class="cho_c">  
                    <block v-for="(item2, index2) in item1.children" :key="index2">  
                      <view :class="[  
                        'cho_c_item',  
                        item.vs2 == item2.label ? 'cho_one_on' : '',  
                      ]" @tap.stop="c_cho" :data-ks="index" :data-label1="item1.label" :data-label2="item2.label"  
                        :data-value="[item1.value, item2.value]">  
                        {{ item2.label }}  
                      </view>  
                    </block>  
                  </view>  
                </block>  
              </view>  
            </block>  
          </scroll-view>  
          <view class="cho_box">  
            <view class="cho_btn" @tap.stop="tog_cho" :data-ks="index" data-reset="1">重置</view>  
            <view class="cho_btn" @tap.stop="tog_cho" :data-ks="index" data-done="1">确定</view>  
          </view>  
        </view>  
      </uni-popup>  
    </block>  
  </view>  

  <!-- 课程 -->  
  <view class="cla" :style="clas">  
    <!-- 课程列表 -->  
    <block v-if="lists && lists.length">  
      <block v-for="(item, index) in lists" :key="index">  
        <view class="cla_item" @tap="to_clas" :data-id="item.id">  
          <!-- 课程列表元素图片 -->  
          <image class="cla_imgs" :src="api_url + item.path" mode=""></image>  
          <!-- 课程列表元素图片 结束 -->  

          <!-- 课程列表元素右 -->  
          <view class="cla_rig">  
            <view class="cla_ts">  
              <text class="cla_tits">{{ item.name }}</text>  
            </view>  

            <!-- 课程列表元素右下 -->  
            <view class="cla_bots">  
              <view class="cla_infos">  
                <image class="cla_icon" src="/static/3.bul/times.png" mode=""></image>  
                <text class="cla_txt">{{ item.time }}</text>  
              </view>  

              <view class="cla_infos">  
                <image class="cla_icon" src="/static/3.bul/nu.png" mode=""></image>  
                <text class="cla_txt">{{ item.num_person }}人学习</text>  
              </view>  
            </view>  
            <!-- 课程列表元素右下 结束 -->  
          </view>  
          <!-- 课程列表元素右 结束 -->  
        </view>  
      </block>  
    </block>  
    <!-- else -->  
    <block v-else>  
      <view class="zanwu_str">  
        <image class="zanwu_imgs" src="/static/zanwu.svg" mode=""></image>  
        <view class="zanwu_str">暂无数据</view>  
      </view>  
    </block>  
    <!-- 课程列表 结束 -->  
  </view>  
  <!-- 课程 结束 -->  
</view>  

</scroll-view>
</template>

<script>
// var app = getApp();
var app;
var that;
var ol = ["综合排序", "发布时间"];
export default {
data() {
return {
api_url: "",
options: {},

  lists: [],  
  p: 1,  
  flow: true,  
  loaded: true,  

  inps: "",  
  index_ajax: {},  
  baseAjax: {},  
  cts: 0,  
  ol: ol,  
  ol_ons: ol[0],  
  ol_imgs: [  
    "/static/3.bul/o_xiala.png",  
    "/static/3.bul/o_up.png",  
    "/static/3.bul/o_down.png",  
  ],  
  ol_keys: 0,  

  cho_types: [  
    {  
      names: "难易度",  
      vs: "",  
      vs1: "",  
      keys: "level_list",  
      ons: false,  
      vals: "",  
      vals1: "",  
      forms: "level",  
      types: "nu",  
    },  
    {  
      names: "技术平台",  
      vs: "",  
      vs1: "",  
      keys: "platform_list",  
      ons: false,  
      vals: "",  
      vals1: "",  
      forms: "platform",  
      types: "nu",  
    },  
    {  
      names: "讲师",  
      vs: "",  
      vs1: "",  
      keys: "lecturer_list",  
      ons: false,  
      vals: "",  
      vals1: "",  
      forms: "lecturer",  
      types: "nu",  
    },  
    {  
      names: "知识点",  
      vs: "",  
      vs1: "",  
      keys: "knowledge_list",  
      ons: false,  
      vals: "",  
      vals1: "",  
      forms: "knowledge",  
      types: "arr",  
    },  
    {  
      names: "产品线",  
      vs: "",  
      vs1: "",  
      keys: "line_list",  
      ons: false,  
      vals: "",  
      vals1: "",  
      forms: "product_line",  
      types: "arr",  
    },  
  ],  
  psy_ons: false,  
  sx_ons: false,  

  page_nu: 0,  
  page_nu_old: 0,  

  cho_nu: 0,  
  cho_nu_old: 0,  

  sysinfo: null,  
  windowWidth: 0,  
  windowHeight: 0,  
};  

},
onLoad(options) {
app = getApp();
if (this && this.$options) {
that = this;
}
that.api_url = app.globalData.api_url;
that.options = options;

if (app.globalData.ct) {  
  that.cts = app.globalData.ct;  
  app.globalData.ct = 0;  
}  

app.request_api(  
  "/lesson/index_ajax",  
  {  
    class_type: that.cts,  
  },  
  function (params) {  
    // console.log(params);  
    that.index_ajax = params;  
  }  
);  

app.request_api("/lesson/baseAjax", {}, function (params) {  
  // console.log(params);  
  that.baseAjax = params;  
});  

that.sysinfo = uni.getSystemInfoSync();  
that.windowWidth = that.sysinfo.windowWidth;  
that.windowHeight = that.sysinfo.windowHeight;  
console.log(that.windowWidth);  
console.log(that.windowHeight);  

},
onShow() {
app = getApp();
if (this && this.$options) {
that = this;
}

if (!app.globalData.uuid) {  
  uni.redirectTo({ url: "/pages/my/login" });  
}  

that.to_load();  

},
// #ifdef MP-WEIXIN
onShareAppMessage() { },
onShareTimeline() { },
// #endif
methods: {
// 空方法
void: function () { },
// 加载
to_load: function (ud = true) {
if (ud) {
// that.lists = [];
that.p = 1;
that.flow = true;
that.loaded = true;
}

  var p = that.p;  

  var datas = {  
    p: p,  
    page: p,  
    keywords: that.inps,  
    type_id: [that.cts],  
    order: that.ol_ons,  
    type: that.ol_keys,  
  };  

  that.cho_types.forEach(function (vo, key) {  
    if (vo.vals) {  
      if (vo.types == "arr") {  
        if (Object.prototype.toString.call(vo.vals) === "[object Array]") {  
          datas[vo.forms] = vo.vals;  
        } else {  
          datas[vo.forms] = [vo.vals];  
        }  
      } else {  
        datas[vo.forms] = vo.vals;  
      }  
    }  
  });  

  app.request_api("/lesson/listAjax", datas, function (params) {  
    // console.log(params);  
    var list = that.lists;  
    var lists = params.class_list;  
    if (p == 1) {  
      list = [];  
    }  
    if (!lists || typeof lists != "object") {  
      lists = [];  
    }  
    list = list.concat(lists);  
    var flow = true;  
    if (list.length == params.total) {  
      flow = false;  
    }  
    that.lists = list;  
    that.flow = flow;  
    that.loaded = true;  
  });  
},  
// 流加载  
to_lower() {  
  var flow = that.flow;  
  var loaded = that.loaded;  
  if (!flow || !loaded) {  
    return false;  
  }  

  var p = that.p;  
  p++;  
  that.p = p;  

  that.to_load(false);  
},  
// 搜索  
to_s: function () {  
  if (app.globalData.uuid) {  
    that.to_load();  
  } else {  
    uni.redirectTo({ url: "/pages/my/login" });  
  }  
},  
// 课程分类选择  
oct: function (res) {  
  // console.log("---------confirm----------", res);  
  // console.log("---------confirm----------", res.value);  
  // console.log("---------confirm----------", res.value[0]);  
  var vals = res.value;  
  var vo = vals[vals.length - 1];  
  // console.log(vo);  
  that.cts = vo.value;  
  that.to_load();  
},  
// 排序切换  
o_do: function (e) {  
  // console.log(e);  
  // console.log(e.currentTarget.dataset.txt);  

  that.ol_ons = e.currentTarget.dataset.txt;  
  if (that.ol_ons == ol[1]) {  
    if (that.ol_keys != 1) {  
      that.ol_keys = 1;  
    } else {  
      that.ol_keys = 2;  
    }  
  } else {  
    that.ol_keys = 0;  
  }  
  that.to_load();  
},  
// 筛选切换  
tog_cho: function (e) {  
  // console.log(e);  
  // console.log(e.currentTarget.dataset.ks);  

  var index = e.currentTarget.dataset.ks;  

  that.cho_types.forEach(function (vo, key) {  
    if (key != index) {  
      vo.ons = false;  
      that.$refs.popup_cho[key].close();  
    }  
  });  

  that.cho_types[index].ons = !that.cho_types[index].ons;  

  if (that.cho_types[index].ons) {  
    that.$refs.popup_cho[index].open();  

    // that.cho_types[index].vs1 = that.cho_types[index].vs;  

    that.cho_types[index].vals1 = that.cho_types[index].vals;  
  } else {  
    that.$refs.popup_cho[index].close();  

    if (e.currentTarget.dataset.reset) {  
      that.cho_types[index].vs = "";  
      that.cho_types[index].vs1 = "";  
      that.cho_types[index].vs2 = "";  

      that.cho_types[index].vals = "";  
      that.cho_types[index].vals1 = "";  

      that.to_load();  
    } else if (e.currentTarget.dataset.done) {  
      var vs1 = that.cho_types[index].vs1;  
      var vs2 = that.cho_types[index].vs2;  
      if (vs2) {  
        vs1 += " / " + vs2;  
      }  
      that.cho_types[index].vs = vs1;  

      that.cho_types[index].vals = that.cho_types[index].vals1;  

      that.to_load();  
    } else {  
    }  
  }  

  that.psy_ons = false;  

  that.$nextTick(function () {  
    var query = uni.createSelectorQuery().in(that);  
    query.select("#cho").boundingClientRect();  
    query.selectViewport().scrollOffset();  
    query.select("#cho_item" + index).boundingClientRect();  
    query.exec(function (params) {  
      // 页面滚动  
      // console.log(params);  
      // console.log("top", params[0].top);  
      // console.log("scrollTop", params[1].scrollTop);  
      // console.log("page_nu_old", that.page_nu_old);  
      var page_nu_c = params[0].top + params[1].scrollTop;  
      page_nu_c -= (180 * that.windowWidth) / 750; //导航栏的高度  
      page_nu_c -= (20 * that.windowWidth) / 750; //margin的高度  
      page_nu_c += that.page_nu_old;  
      that.page_nu = that.page_nu_old;  

      that.$nextTick(function () {  
        // console.log(page_nu_c);  
        that.page_nu = page_nu_c;  

        that.$nextTick(function () {  
          if (that.cho_types[index].ons) {  
            that.psy_ons = true;  
          } else {  
            that.psy_ons = false;  
          }  
        });  
      });  

      // 筛选项滚动  
      // console.log(params);  
      var cho_nu_c = that.cho_nu_old + params[2].left; //元素到屏幕左边的距离  
      cho_nu_c -= (that.windowWidth - params[2].width) / 2; //减去这个数据让元素滚动到中间  
      that.cho_nu = (that.cho_nu_old || 0) + 1;  

      that.$nextTick(function () {  
        // console.log(cho_nu_c);  
        console.log(params[2], that.cho_nu_old, cho_nu_c);  
        that.cho_nu = cho_nu_c;  
        that.$nextTick(function () {  
          // that.cho_nu_old = cho_nu_c; //更新之前数据  
          // if (that.cho_types[index].ons) {  
          //   that.sx_ons = true;  
          // } else {  
          //   that.sx_ons = false;  
          // }  
        });  
      });  
    });  
  });  
},  
// 滚动距离记录  
page_cho: function (e) {  
  // console.log(e);  
  // console.log(e.detail.scrollTop);  

  that.page_nu_old = e.detail.scrollTop; //之前数据  
},  
// 滚动距离记录  
sv_cho: function (e) {  
  // console.log(e);  
  console.log(e.detail.scrollLeft);  

  that.cho_nu_old = e.detail.scrollLeft; //之前数据  
},  
// 类型选择  
c_cho: function (e) {  
  // console.log(e);  
  // console.log(e.target.dataset.ks);  
  // console.log(e.target.dataset.l);  

  var index = e.currentTarget.dataset.ks;  
  var label1 = e.currentTarget.dataset.label1;  
  var label2 = e.currentTarget.dataset.label2;  
  var value = e.currentTarget.dataset.value;  

  var c = e.currentTarget.dataset.c;  
  // console.log(c);  
  if (!c) {  
    that.cho_types[index].vs1 = label1;  
    that.cho_types[index].vs2 = label2;  
    that.cho_types[index].vals1 = value;  
  }  
},  
// 课程详情  
to_clas: function (e) {  
  // console.log(e);  
  // console.log(e.currentTarget.dataset.id);  

  if (app.globalData.uuid) {  
    uni.navigateTo({  
      url: `/pages/lesson/show?class_id=${e.currentTarget.dataset.id}`,  
    });  
  } else {  
    uni.redirectTo({ url: "/pages/my/login" });  
  }  
},  

},
// 设置样式
computed: {
clas() {
return {
// "min-height": this.windowHeight - (270 this.windowWidth) / 750 + "px",
"min-height":
uni.getSystemInfoSync().windowHeight -
(270 uni.getSystemInfoSync().windowWidth) / 750 +
"px",
};
},
},
};
</script>

<style>
template,
page {
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
}

.htmler_sv {
overflow: hidden;
flex-grow: 1;
-webkit-overflow-scrolling: auto;

width: 100%;
height: 100%;
/ position: fixed; /
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

/ 内容 /
.htmler {
margin: 0 30rpx;
}

/ 搜索 /
.search {
overflow: hidden;
display: flex;
align-items: center;
margin-top: 20rpx;
box-sizing: border-box;
position: relative;

height: 80rpx;
line-height: 80rpx;
background-color: #ededed;
border-radius: 40rpx;
}

.search_imgs {
width: 26rpx;
height: 26rpx;
position: absolute;
top: 50%;
left: 60rpx;
margin-top: -13rpx;
}

.search_inps {
overflow: hidden;
flex-grow: 1;
height: inherit;
line-height: inherit;
padding-left: 98rpx;
padding-right: 30rpx;

font-family: MicrosoftYaHei;
font-size: 26rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #333333;
}

.search_line {
width: 2rpx;
height: 30rpx;
background-color: #4276fd;
}

.search_btn {
overflow: hidden;
flex-shrink: 0;
width: 141rpx;
height: inherit;
line-height: inherit;
text-align: center;

font-family: MicrosoftYaHei;
font-size: 26rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 3rpx;
color: #4276fd;
}

/ banner /
.bas {
height: 300rpx;
margin-top: 19rpx;
border-radius: 20rpx;
overflow: hidden;
}

.bas image {
width: 100%;
height: 100%;
}

/ 排序 /
.orders {
overflow: hidden;
display: flex;
height: 69rpx;
line-height: 69rpx;
margin-top: 11rpx;
}

.orders_item {
overflow: hidden;
flex: 1;
text-align: center;
border-bottom: 2rpx solid #f2f2f2;

font-family: MicrosoftYaHei;
font-size: 30rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #333333;
}

.orders_ons {
border-color: #4276fd;
color: #4276fd;
}

.orders_line {
display: inline-block;
width: 13rpx;
}

.orders_imgs {
width: 16rpx;
height: 21rpx;
}

/ 子级 /
.cho_c {
/ width: 100%; /
background: #eee;
/ border: 1rpx solid #eee; /
border-radius: 10rpx;
margin: 10rpx;
/ padding: 10rpx; /
}

.cho_c_item {
display: inline-block;
width: 50%;
padding: 18rpx;
box-sizing: border-box;

position: relative;
z-index: 999999;

font-family: MicrosoftYaHei;
font-size: 20rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #333;

border-bottom: 1rpx solid #f6f6f6;
border-right: 1rpx solid #f6f6f6;
}

/ 子级结束 /

/ 筛选 /
.cho {
margin: 20rpx -30rpx;
margin-bottom: 0;
position: relative;
z-index: 100;

overflow: hidden;
display: flex;
align-items: flex-start;
white-space: nowrap;
overflow-y: scroll;
}

.cho_item {
overflow: hidden;
display: inline-flex;
align-items: center;
flex-shrink: 0;
position: relative;
z-index: 100;

height: 50rpx;
line-height: 50rpx;
margin-left: 22rpx;
margin-bottom: 20rpx;
padding: 0 16rpx;
background-color: #f6f6f6;
border: 1rpx solid #f6f6f6;
border-radius: 25rpx;

font-family: MicrosoftYaHei;
font-size: 22rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #686868;
}

.cho_item::after {
display: block;
content: "";
}

.cho_item:first-of-type {
margin-left: 0;
}

.cho_line {
display: inline-block;
width: 30rpx;
height: 10rpx;
}

.cho_sels {
color: #218fff;
border-color: #218fff;
background: #cce6ff;
}

.cho_ons {
margin-bottom: 0;
padding-bottom: 20rpx;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;

background-color: #f6f6f6;
border-color: #f6f6f6;
}

.cho_txt {
padding-right: 8rpx;
}

.cho_imgs {
width: 18rpx;
height: 10rpx;
}

.cho_p {
margin-top: 270rpx;
background-color: #f6f6f6;

position: relative;
z-index: 999999;
}

.cho_sv {
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: center;
height: 600rpx;

position: relative;
z-index: 999999;
}

.cho_one {
display: inline-block;
width: 50%;
padding: 18rpx;
box-sizing: border-box;

position: relative;
z-index: 999999;

font-family: MicrosoftYaHei;
font-size: 22rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #333;
}

.cho_one_on {
color: #218fff;
}

.cho_one_c {
width: 100%;
}

.cho_box {
overflow: hidden;
display: flex;
height: 100rpx;
line-height: 100rpx;
border-top: 1rpx solid #dedede;
text-align: center;
}

.cho_btn {
overflow: hidden;
flex: 1;
}

.cho_btn:nth-child(1) {
font-family: MicrosoftYaHei;
font-size: 30rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #218fff;
}

.cho_btn:nth-child(2) {
background-color: #218fff;

font-family: MicrosoftYaHei;
font-size: 30rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #ffffff;
}

/ 课程 /
.cla {
min-height: 3000rpx;
}

/ 课程列表 /
.cla_item {
overflow: hidden;
display: flex;
padding: 20rpx 0;
border-top: 2rpx solid #f9f9fb;
}

.cho_item:first-child {
border-top: none;
}

/ 课程列表元素图片 /
.cla_imgs {
overflow: hidden;
flex-shrink: 0;
position: relative;

width: 200rpx;
height: 150rpx;
background-color: #ffffff;
border-radius: 10rpx;
border: solid 1rpx #e5e5e5;
}

.cla_subs {
width: 80rpx;
height: 36rpx;
position: absolute;
top: 0;
left: 0;
}

.cla_m {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;

width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

font-family: MicrosoftYaHei;
font-size: 22rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #ffffff;
}

/ 课程列表元素右 /
.cla_rig {
overflow: hidden;
flex-grow: 1;
margin-left: 30rpx;
}

.cla_ts {
height: 90rpx;

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-wrap: break-word;
/英文强制换行/
word-break: break-all;
/英文强制换行/
}

.cla_label {
margin-right: 8rpx;
padding: 7rpx 18rpx;

border-radius: 6rpx;
border: solid 1rpx #ea5628;

font-family: MicrosoftYaHei;
font-size: 22rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #ea6633;
}

.cla_tits {
line-height: 1.5;

font-family: MicrosoftYaHei;
font-size: 30rpx;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0rpx;
color: #333333;
}

/ 课程列表元素右下 /
.cla_bots {
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
}

.cla_infos {
overflow: hidden;
display: flex;
align-items: center;

font-family: MicrosoftYaHei;
font-size: 26rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #666666;
}

.cla_icon {
width: 30rpx;
height: 30rpx;
}

.cla_txt {
padding-left: 12rpx;
}

.cla_btn {
text-align: center;

width: 180rpx;
height: 60rpx;
line-height: 60rpx;
background-color: #4276fd;
border-radius: 20rpx;

font-family: MicrosoftYaHei;
font-size: 26rpx;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rpx;
color: #ffffff;
}
</style>
这个代码中that.cho_nu = cho_nu_c;这一行编译到小程序之后有时不生效
HBuilder X 3.99
Win10
微信开发者工具 Stable 1.06.2401020
真机和模拟器都可以复现