zoukankan      html  css  js  c++  java
  • vant的tab选项卡的点击事件传参

    1、在van-tabs上绑定点击事件(getQuestionByTypeid2)

    <van-tab title="热榜">
            <div id="hot-list-title">
              <van-tabs
                v-model="typeid"
                sticky
                offset-top="43"
                @click="getQuestionByTypeid2"
              >
                <van-tab
                  v-for="item in TypeNameList"
                  :title="item.name"
                  :name="item.typeid"   //不写就默认为索引下标
                  :key="item.typeid"
                >
                  <van-grid :column-num="1" :center="false">
                    <van-grid-item
                      v-for="(item2, index) in QuestionListByTypeid"
                      :key="index"
                      class="r-q-content"
                    >
                      <nuxt-link
                        v-on:click.stop="doThis"
                        :to="
                          `question?id=${item2.questionid}&redirectUrl=%2Fres061401%2Fycc%2Fshop%2Fmobile%2Fquestion%3Fid%3D181${item2.questionid}`
                        "
                      >
                        <div class="r-q-title">
                          {{ item2.title }}
                        </div>
                      </nuxt-link>
                      <div
                        v-html="item2.content"
                        class="q-desc fr-element fr-view"
                      ></div>
                      <div style="color: #999;">
                        <span>{{ item2.answerCount }}&nbsp;热度</span>
                      </div>
                    </van-grid-item>
                  </van-grid>
                </van-tab>
              </van-tabs>
            </div>
          </van-tab>
     
    2、方法
    getQuestionByTypeid2(tid, title) {
          window.sessionStorage.setItem('Tid', title)
          console.log(tid) //默认是点击该选项的下标,但是在上面已经给绑定更改name了这里就不会是默认的了 绑定什么值传来就是什么值(item.typeid)
          console.log(title) 
          this.getQuestionByTypeid()
        }
     
    在手机端 为防止点击tab选项卡里面的内容跳到新页面返回后默认回到tab选项卡的第一个,可加上target="_blank"
    例如:
    <nuxt-link
                        v-on:click.stop="doThis"
                        :to="
                          `question?id=${item2.questionid}&redirectUrl=%2Fres061401%2Fycc%2Fshop%2Fmobile%2Fquestion%3Fid%3D181${item2.questionid}`
                        "
                        target="_blank"
                      >
     
  • 相关阅读:
    InfluxDB 安装使用
    Jenkins 覆盖率插件Cobertura 使用
    sonarqube的安装部署以及集成jenkins
    vscode md样式自定义
    maven配置JaCoCo
    jenkins 安装
    Maven 构建报依赖jar下载失败
    Telegraf 简单使用
    Python 生成当前项目依赖包 requirements
    面试内容
  • 原文地址:https://www.cnblogs.com/chenshaoxiong/p/13345978.html
Copyright © 2011-2022 走看看