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

[Studio3] avm 的vif 的样式切换有严重问题

[复制链接]
忽上忽下 发表于 2021-11-25 15:39:59
说明: 就使我先页面加载的时候,属于样式1,内容是默认背景色为白色,只是设置了宽高,没有特别设置背景色, 然后点击一个按钮,变成样式2,也就是背景色变黑,然后再点击 样式1 按钮, 然后这个时候,属于样式2的背景色居然还存在,并没有被去除元素

  1. <template>
  2.         <view class="page">
  3.                 <safe-area></safe-area>
  4.                         <button class="" @click="test(1)">样式1</button>
  5.                         <button class="" @click="test(2)">样式2</button>
  6.                         <view v-if="active == 1" class="test1"></view>
  7.                         <view v-if="active == 2" class="test2"></view>
  8.         </view>
  9. </template>


  10. <script>
  11. export default {
  12.         name: 'home_frm',
  13.         install() {
  14.                 if (api.platform == 'app') {
  15.                         api.setStatusBarStyle({
  16.                                 style: 'dark'
  17.                         });
  18.                 }
  19.         },
  20.         apiready() {//like created

  21.         },
  22.         data() {
  23.                 return {
  24.                         active: 1
  25.                 }
  26.         },
  27.         methods: {
  28.                 test(index) {
  29.                         this.data.active = index;
  30.                 }
  31.         }
  32. }
  33. </script>

  34. <style>
  35. .test2 {
  36.         background: #000;
  37.         width: 100%;
  38.         height: 300px;
  39. }
  40. .test1 {
  41.         width: 100%;
  42.         height: 300px;
  43. }
  44. .page {
  45.         width: 100%;
  46.         height: 100%;
  47. }
  48. </style>
复制代码


8条回复

技术支持-F 管理员 24779Y币
android   iOS  都有问题吗?
忽上忽下 业余车手 1205Y币
ios 没问题, 就安卓存在,赶紧修一修,因为这个现在没法在安卓调试了
忽上忽下 业余车手 1205Y币
仔细测试了一下,ios 也有,ios 的这个样式没有清除我这里测试出来是在list-view 标签和 grid-view 标签的来回切换,更换背景颜色,出现了这个,需要我可以提供ios 出现bug 的源码
技术支持-F · 2021-11-25 15:48android   iOS  都有问题吗?
  1. <template>
  2.     <view class="page">
  3.                         <safe-area class="b-fff">
  4.                         </safe-area>
  5.                         <view class="search-box disflex-v-center">
  6.                                 <view class="flex search disflex-v-center" @click="back">
  7.                                         <image src="../../image/icon-010.png" class="searh-icon" />
  8.                                         <text class="search-word">{search_word}</text>
  9.                                 </view>
  10.                                 <text class="cancel" @click="cancel">取消</text>
  11.                         </view>
  12.                         <view class="select-box disflex-v-space-between disflex-v-center">
  13.                                 <view class=" position-rel height-100p margin-l-30 disflex-middle" @click="switch(0)">
  14.                                         <text :class="'fz14 ' +(active_index == 0 ? 'font-m c-33344A':'font-r c-666c7b')">
  15.                                                 合同
  16.                                         </text>
  17.                                         <view :class="'box ' + (active_index == 0 ? 'b-33344a' : 'b-fff')"></view>
  18.                                 </view>
  19.                                 <view class=" position-rel height-100p disflex-middle"  @click="switch(1)">
  20.                                         <text :class="'fz14 ' +(active_index == 1 ? 'font-m c-33344A':'font-r c-666c7b')">
  21.                                                 课程
  22.                                         </text>
  23.                                         <view :class="'box ' + (active_index == 1 ? 'b-33344a' : 'b-fff')"></view>
  24.                                 </view>
  25.                                 <view class=" position-rel height-100p disflex-middle"  @click="switch(2)">
  26.                                         <text :class="'fz14 ' +(active_index == 2 ? 'font-m c-33344A':'font-r c-666c7b')">
  27.                                                 律师
  28.                                         </text>
  29.                                         <view :class="'box ' + (active_index == 2 ? 'b-33344a' : 'b-fff')"></view>
  30.                                 </view>
  31.                                 <view class=" position-rel height-100p margin-r-30 disflex-middle"  @click="switch(3)">
  32.                                         <text :class="'fz14 ' +(active_index == 3 ? 'font-m c-33344A':'font-r c-666c7b')">
  33.                                                 资讯
  34.                                         </text>
  35.                                         <view :class="'box ' + (active_index == 3 ? 'b-33344a' : 'b-fff')"></view>
  36.                                 </view>
  37.                         </view>
  38.                         <view v-if="active_index == 0" class="flex margin-left-15 margin-right-15">
  39.                                 <list-view v-if="api.platform == 'app'" scroll-y="true" show-scrollbar="false" class="scroll-list" id="contract" >
  40.                                         <cell>
  41.                                                 <view class="contract-item disflex-v-center">
  42.                                                         <image :src="item.img_url" class="icon-46"></image>
  43.                                                         <view class="margin-left-19">
  44.                                                                 <text class="title ellipsis">{item.title}</text>
  45.                                                                 <text class="date">{item.date}</text>
  46.                                                         </view>
  47.                                                 </view>
  48.                                         </cell>
  49.                                 </list-view>
  50.                                 <scroll-view v-else scroll-y="true" show-scrollbar="false"  class="scroll-list">
  51.                                         <view v-for="(item,index) in contract_list" :key="index" class="contract-item disflex-v-center">
  52.                                                         <image :src="item.img_url" class="icon-46"></image>
  53.                                                         <view class="margin-left-19">
  54.                                                                 <text class="title ellipsis ellipsis-mp max-width-300">{item.title}</text>
  55.                                                                 <text class="date">{item.date}</text>
  56.                                                         </view>
  57.                                         </view>
  58.                                 </scroll-view>
  59.                         </view>
  60.                         <view v-if="active_index == 1" class="flex width-100p" style="background:#000;">
  61.                                 <grid-view v-if="api.platform == 'app'" column-count="2"  scroll-y="true" show-scrollbar="false" stretch-mode="spacingWidth" class="scroll-list" id="course">
  62.                                         <cell>
  63.                                                 <view class="item-box">

  64.                                                 </view>
  65.                                         </cell>
  66.                                 </grid-view>
  67.                                 <scroll-view v-else scroll-y="true" show-scrollbar="false"  class="scroll-list" >
  68.                                
  69.                                 </scroll-view>
  70.                         </view>
  71.     </view>
  72. </template>
  73. <script>
  74. export default {
  75.         name: 'home_search_result',
  76.         apiready() {//like created
  77.                 this.data.search_word = api.pageParam.search_word;
  78.                 if (api.platform == 'app') {
  79.                         document.getElementById("contract").load({
  80.                                 data: this.data.contract_list
  81.                         })
  82.                 }
  83.         },
  84.         data() {
  85.                 return {
  86.                         search_word: '',
  87.                         active_index: 0,
  88.                         contract_list: [{
  89.                                 img_url: "../../image/icon-018.png",
  90.                                 title: "安全管理责任书安全管理责任书安全管理责任书安全管理责任安全管理责任",
  91.                                 date: "2021.10.28 15:26"
  92.                         }, {
  93.                                 img_url: "../../image/icon-018.png",
  94.                                 title: "安全管理责任书安全管理责任书安全管理责任书安全管理责任",
  95.                                 date: "2021.10.28 15:26"
  96.                         }, {
  97.                                 img_url: "../../image/icon-018.png",
  98.                                 title: "安全管理责任书安全管理责任书安全管理责任书安全管理责任",
  99.                                 date: "2021.10.28 15:26"
  100.                         }, {
  101.                                 img_url: "../../image/icon-018.png",
  102.                                 title: "安全管理责任书安全管理责任书安全管理责任书安全管理责任",
  103.                                 date: "2021.10.28 15:26"
  104.                         }, {
  105.                                 img_url: "../../image/icon-018.png",
  106.                                 title: "安全管理责任书安全管理责任书安全管理责任书安全管理责任",
  107.                                 date: "2021.10.28 15:26"
  108.                         }],
  109.                         course_list: [{
  110.                                 img_url: "../../image/demo3.jpg",
  111.                                 title: "青年律师行业化发展进阶之路青年律师行业化发展进阶之路青年律师行业化发展进阶之路青年律师行业化发展进阶之路",
  112.                                 speack: "张教授",
  113.                                 watch: "2000",
  114.                                 type: 1
  115.                         }, {
  116.                                 img_url: "../../image/demo3.jpg",
  117.                                 title: "青年律师行业化发展进阶之路青年律师行业化发展进阶之路青年律师行业化发展进阶之路青年律师行业化发展进阶之路",
  118.                                 speack: "张教授",
  119.                                 date: "2021.10.28 14:30",
  120.                                 type: 2
  121.                         }, {
  122.                                 img_url: "../../image/demo3.jpg",
  123.                                 title: "青年律师行业化发展进阶之路青年律师行业化发展进阶之路青年律师行业化发展进阶之路青年律师行业化发展进阶之路",
  124.                                 speack: "张教授",
  125.                                 watch: "2000",
  126.                                 type: 1
  127.                         }, {
  128.                                 img_url: "../../image/demo3.jpg",
  129.                                 title: "青年律师行业化发展进阶之路青年律师行业化发展进阶之路青年律师行业化发展进阶之路青年律师行业化发展进阶之路",
  130.                                 speack: "张教授",
  131.                                 date: "2021.10.28 14:30",
  132.                                 type: 2
  133.                         }, {
  134.                                 img_url: "../../image/demo3.jpg",
  135.                                 title: "青年律师行业化发展进阶之路青年律师行业化发展进阶之路青年律师行业化发展进阶之路青年律师行业化发展进阶之路",
  136.                                 speack: "张教授",
  137.                                 watch: "2000",
  138.                                 type: 1
  139.                         }, {
  140.                                 img_url: "../../image/demo3.jpg",
  141.                                 title: "青年律师行业化发展进阶之路青年律师行业化发展进阶之路青年律师行业化发展进阶之路青年律师行业化发展进阶之路",
  142.                                 speack: "张教授",
  143.                                 date: "2021.10.28 14:30",
  144.                                 type: 2
  145.                         }]
  146.                 }
  147.         },
  148.         methods: {
  149.                 switch(index) {
  150.                         this.data.active_index = index;
  151.                         if (index == 0) {
  152.                                 document.getElementById("contract").load({
  153.                                         data: this.data.contract_list
  154.                                 })
  155.                         } else if (index == 1) {
  156.                                 document.getElementById("course").load({
  157.                                         data: this.data.course_list
  158.                                 })
  159.                         }
  160.                 },
  161.                 back() {
  162.                         api.closeWin()
  163.                 },
  164.                 cancel() {
  165.                         api.closeToWin({
  166.                                 name: 'root'
  167.                         })
  168.                 }
  169.         }
  170. }
  171. </script>
  172. <style src="../../css/api.css" />
  173. <style src="../../css/color.css" />
  174. <style>
  175. .item-box {
  176.         width: 161px;
  177.         height: 218px;
  178.         background: #ffffff;
  179.         border-radius: 4px;
  180. }
  181. .max-width-300 {
  182.         max-width: 300px;
  183. }
  184. .margin-left-19 {
  185.         margin-left: 19px;
  186. }
  187. .date {
  188.         margin-top: 12px;
  189.         font-size: 12px;
  190.         font-family: PingFangSC-Regular, PingFang SC;
  191.         font-weight: 400;
  192.         color: #98a2ac;
  193.         line-height: 16px;
  194. }
  195. .title {
  196.         font-size: 14px;
  197.         font-family: PingFangSC-Medium, PingFang SC;
  198.         font-weight: 500;
  199.         height: 20px;
  200.         color: #33344a;
  201.         line-height: 20px;
  202. }
  203. .icon-46 {
  204.         width: 46px;
  205.         height: 46px;
  206.         margin-left: 14px;
  207. }
  208. .margin-left-15 {
  209.         margin-left: 15px;
  210. }
  211. .margin-right-15 {
  212.         margin-right: 15px;
  213. }
  214. .contract-item {
  215.         width: 100%;
  216.         height: 86px;
  217.         background: #ffffff;
  218.         border-radius: 4px;
  219.         margin-top: 10px;
  220. }
  221. .scroll-list {
  222.         height: 100%;
  223.         width: 100%;
  224. }
  225. .box {
  226.         position: absolute;
  227.         height: 2px;
  228.         width: 100%;
  229.         left: 0;
  230.         bottom: 0;
  231. }
  232. .fz14 {
  233.         font-size: 14px;
  234. }
  235. .margin-r-30 {
  236.         margin-right: 30px;
  237. }
  238. .margin-l-30 {
  239.         margin-left: 30px;
  240. }
  241. .select-box {
  242.         background: #fff;
  243.         height: 40px;
  244. }
  245. .search-word {
  246.         margin-left: 6px;
  247.         font-size: 12px;
  248.         font-family: PingFangSC-Regular, PingFang SC;
  249.         font-weight: 400;
  250.         color: #33344a;
  251.         line-height: 15px;
  252. }
  253. .input {
  254.         background: rgba(229, 233, 242, 0);
  255.         margin-left: 6px;
  256.         font-size: 12px;
  257.         font-family: PingFangSC-Regular, PingFang SC;
  258.         font-weight: 400;
  259.         line-height: 15px;
  260. }
  261. .searh-icon {
  262.         width: 13px;
  263.         height: 13px;
  264.         margin-left: 12px;
  265. }
  266. .search {
  267.         height: 33px;
  268.         background: rgba(229, 233, 242, 0.5);
  269.         border-radius: 16px;
  270. }
  271. .cancel {
  272.         font-size: 13px;
  273.         font-family: PingFangSC-Regular, PingFang SC;
  274.         font-weight: 400;
  275.         color: #4782f2;
  276.         line-height: 19px;
  277.         margin-left: 14px;
  278. }
  279. .search-box {
  280.         margin-top: 0;
  281.         height: 43px;
  282.         padding-left: 14px;
  283.         padding-right: 14px;
  284.         background: #fff;
  285. }
  286. .page {
  287.         height: 100%;
  288.         background: #f2f2f7;
  289. }
  290. </style>
复制代码

技术支持-F 管理员 24779Y币
收到,我们看一下
技术支持-F 管理员 24779Y币
先换个写法
忽上忽下 · 2021-11-25 15:56仔细测试了一下,ios 也有,ios 的这个样式没有清除我这里测试出来是在list-view 标签和 grid-view 标签的来回切换,更换背景颜色,出现了这个,需要我可以提供ios 出现bug 的源码

...
忽上忽下 业余车手 1205Y币
vshow 也有类似的问题,大佬可以自己搞个demo试试
常山赵子云 管理员 6141Y币
css样式在原生中目前还不能做到像浏览器一样的运算,如果要实现切换,可以将需要样式都写好,明确声明,比如白色背景切换到黑色背景:
test1{
width:100%;
height:100%;
background:#FFF;
}
test2{
width:100%;
height:100%;
background:#000;
}
Leo 实习司机 230Y币
这个真是太难以接受了,研究了好几天,发现无解
常山赵子云 · 2021-12-6 16:06css样式在原生中目前还不能做到像浏览器一样的运算,如果要实现切换,可以将需要样式都写好,明确声明,比如白色背景切换到黑色背景:
test1{
width:100%;
您需要登录后才可以回帖 登录

本版积分规则