精华内容
下载资源
问答
  • vue前端信息详情页模板梳理 前言: 自己总结方便自己用的,觉得有用可以参考使用,欢迎留言提出改进意见。 1.HTML部分: <template xmlns:el-form-item="http://www.w3.org/1999/xhtml"> <el-form ref=...

    vue前端信息详情页模板梳理

    前言:

    自己总结方便自己用的,觉得有用可以参考使用,欢迎留言提出改进意见。

    1.HTML部分:

    <template xmlns:el-form-item="http://www.w3.org/1999/xhtml">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-page-header content="详情页主题" @back="goBack" />
        <el-row style="margin-top: 30px">
          <!--基本输入框-->
          <el-col :span="8">
            <el-form-item label="属性1" prop="name1">
              <el-input v-model="form.model1" placeholder="提示输入内容" :readonly="status"/>
            </el-form-item>
          </el-col>
          <!--基本单选框-->
          <el-col :span="8">
            <el-form-item label="属性2" prop="name2">
              <el-select v-model="form.model2" class="whiteSelectBg" placeholder="提示单选" style="width: 100%;" :disabled="status">
                <el-option label="选项1" value="1" />
                <el-option label="选项2" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <!--基本多选框-->
          <el-col :span="8">
            <el-form-item label="属性3" placeholder="" prop="subjectId">
              <el-select v-model="form.model3" multiple placeholder="提示多选" style="width: 100%;" @change="getOption">
                <el-option v-for="option in options" :key="option.id" :label="option.name" :value="option.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!--上传文件-->
        <el-row>
          <el-upload :disabled="status" action="文件上传的controller路径" :on-success="uploadSuccess" :before-upload="beforeUpload" :show-file-list="false"
          >
            <el-col :span="20">
              <el-form-item label="文件类型名" prop="fileName">
                <el-input v-model="form.fileName" placeholder="请上传实验指导,可以上传doc,docx,pdf等文档格式" readonly style="width: 750px;" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" icon="el-icon-upload" style="margin-left: 25px;" :disabled="status">上传文件</el-button>
            </el-col>
          </el-upload>
        </el-row>
        <!--数据表格-->
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-table v-loading="listLoading" :data="form.tableList" border fit highlight-current-row style="width: 100%;" class="tb-edit" @row-click="tableChange">
                <el-table-column align="center" :label="序号" type="index" width="80"/>
                <!--普通数据格-->
                <el-table-column :label="表头1" align="center" min-width="100px">
                  <template slot-scope="{row}">
                    <span>{{ row.id }}</span>
                  </template>
                </el-table-column>
                <!--可编辑数据格,根据数据状态变换输入还是只显示-->
                <el-table-column :label="表头2" align="center" min-width="100px">
                  <template slot-scope="{row}">
                    <el-input v-if="row.seen" ref="tableInput" v-model="row.name" autofocus="autofocus" maxlength="5" @change="tableEdit(row.$index, row)" />
                    <span v-else>{{ row.name }}</span>
                  </template>
                </el-table-column>
                <!--操作按钮格-->
                <el-table-column :label="'操作'" align="center" min-width="100px">
                  <template slot-scope="{row}">
                    <el-button size="mini" type="danger" @click="delete(row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
        <!--基础动态表单区块-->
        <el-card class="box-card" shadow="never" style="margin-left: 100px;">
          <div slot="header" class="clearfix">
            <span>区块名</span>
            <el-button type="primary" v-if="addBt" style="margin-left: 700px;" :disabled="status" @click="addCard">新增</el-button>
          </div>
          <div style="text-align: center;">
            <el-row v-for="(card, index) in cards" :key="card.key">
              <el-col :span="8">
                <el-form-item :label="属性1">
                  <!--根据需求自己选择放输入框还是单选多选框-->
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="属性2">
                  <!--根据需求自己选择放输入框还是单选多选框-->
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-button :disabled="status" @click.prevent="deleteCard(card)">删除</el-button>
                <el-button :disabled="status" @click="addCard">新增</el-button>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <el-row>
          <el-form-item style="text-align: center; margin-top: 30px; margin-left: -30px">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="reset('form')">重置</el-button>
            <el-button @click="goBack">返回</el-button>
          </el-form-item>
        </el-row>   
      </el-form>
    </template>
    

    2.JS部分:

    <script>
    import waves from '@/directive/waves' // waves directive,点击产生水波纹效果,在标签中添加 v-waves
    import Pagination from '@/components/Pagination' // 分页组件
    
    export default {
      data() {
        return {
          id: '',
          options: [],
          guideFileIsChange: '',
          guideFile: { file: '', name: '' },
          listLoading: false,
          addBt: true,
          form: {
            model1: '',
            model2: '',
            model3: [],
            fileName: '',
            tableList: [{
              id: '',
              name: '',
              seen: false,
            },{
              id: '',
              name: '',
              seen: false,
            }]
            cards: [],     
          },
        },
        rules: {
          'model1': [{
              required: true,
              message: '请输入内容'
            }],
          'model2': [{
              required: true,
              message: '请选择选项'
            }],
          'model3': [{
              required: true,
              message: '请选择选项'
            }], 
          'fileName': [{
              required: true,
              message: '请上传文件'
            }],
        },
      },
      // 页面初始化
      created() {
        // 获取上一个页面传递过来的参数,id,状态等。。。
        this.id = this.$route.query.id
        this.action = this.$route.query.action
      },
      methods: {
        // 跳转返回指定的页面
        goBack() {
          this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews
            .findIndex(item => item.path ===
              this.$route.path), 1)
          this.$router.push({
            path: '跳转的页面路径'
          })
        },
        getOption() {
          // 获取动态选项框的数据
          const list = []
          this.options = list
        },
        // 上传文件
        uploadSuccess(res, file) {
          this.guideFileIsChange = '1'
          this.guideFile.file = file.raw
          this.guideFile.name = file.raw.name
          this.form.fileName = file.raw.name
        },
        // 实验指导书的信息
        beforeUpload(file) {
          setTimeout(() => {
            this.$message({
              duration: 1600,
              type: 'success',
              message: '上传文件成功!'
            })
          })
          return true
        },
        tableChange() {
          console.log('点击表格行触发的操作')
        },
        // 触发出现输入框
        tableEdit(row.$index, row) {
          for (const index in this.tableList) {
            if (row.id !== this.tableList[index].id) {
              this.tableList[index].seen = false
            } else {
              this.tableList[index].seen === false ? this.tableList[index].seen = true : this.tableList[index].seen = false
            }
          }
          if (row.seen === true) {
            this.$nextTick(() => {
              this.$refs.tableInput.focus()
            }, 100)
          }
        },
        delete(id) {
          this.$confirm('确认删除这一条信息?', '确认删除?', {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(() => {
            for (let i = 0; i < this.tableList.length; i++) {
              if (id === this.tableList[i].id) {
                this.tableList.splice(i, 1)
              }
            }
            this.$message.success('删除成功!')
          }).catch(action => {})
        },
        addCard() {
          this.cards.push({key1: value1, key2: value2})
          this.addBt = false
        },
        deleteCard(card) {
          const index = this.cards.indexOf(card)
          if (index !== -1) {
            this.cards.splice(index, 1)
          } if (this.cards.length === 0) {
            this.addBt = true
          }
        },
        submit() {
          console.log('提交!')
        },
        reset(formName) {
          this.$refs[formName].resetFields()
        },
      },
    }
    

    3.css部分:

    // 这是修改过得输入框只读的样式
    <style>
      .whiteSelectBg .el-input.is-disabled .el-input__inner{
        background-color: white;
        color:#606266;
      }
    </style>
    
    展开全文
  • Vue商城——详情页功能

    千次阅读 2020-04-20 22:33:15
    点击商品进去详情页,根据点击请求更加详细的信息,要传过来goodsItem的iid,根据id去服务器请求更加详细的信息;配置路由映射关系,点击进行跳转,带参数传递跳转 itemClick(){ this.$router.push('/detail/'+this....

    详情页实现思路

    点击商品进去详情页,根据点击请求更加详细的信息,要传过来goodsItem的iid,根据id去服务器请求更加详细的信息;配置路由映射关系,点击进行跳转,带参数传递跳转。
    在GoodsListItem中

    itemClick(){
            this.$router.push('/detail/'+this.goodsItem.iid)
            /* this.$router.push({
              path:'/detail',
              query:{
                iid:this.goodsItem.iid
              }
            }) */
          }
    

    但是获取到的iid在更换点击商品时没有改变,并没有发生新的请求,因为发生了路由跳转,router-view由keep-alive包着,不会每次销毁并重新创建,所以不会给iid给新的值,详情页不要使用keep-alive,使用exclude属性

    <keep-alive exclude="Detail">
    	<router-view></router-view>
    </keep-alive>
    

    首页的位置保持不变

    指定版本安装better-scroll npm install better-scroll@1.13.2 --save
    用keep-alive标签把router-view标签包住,点击其他导航栏,再点击首页,自动回到顶部,不是因为创建了新的Home.vue,获取离开时滚动的位置,再次进入的时候设置保存的位置。【频繁切换还是会自动回到顶部???】

    导航栏的封装

    1.在childComps中创建组件DetailNavBar.vue,在组件中引入公共组件TabBar,替换TabBar组件中的插槽,在详情页Detail中引入封装好的导航栏DetailNavBar,
    2.引入一个返回图标,绑定点击事件,点击之后会返回到之前进入的状态
    3.将导航栏中的标题定义成数组titles然后遍历,进行flex布局
    4.标题点击谁,谁就变成红色
    ** 定义一个当前索引currentIndex,动态绑定class,动态绑定点击事件 【此处是否可以直接引入tabControl组件??】

    加入滚动的效果Scroll

    1.指定版本安装better-scroll npm install better-scroll@1.13.2 --save
    2.详情页的底部导航栏NavBar不用展示,可以给详情页相对布局并设置层级关系,给一个白色的背景色,详情页就可以脱离原来的标准流,把底部导航栏隐藏了
    3.顶部的导航栏在DetailNavBar组件中设置相对定位层级关系和背景颜色
    4.仍然选择better-scroll,引用之前封装好的Scroll,把要滚动的东西用scroll包裹住,替换Scroll里面的插槽
    5.scroll需要有固定的高度,让父元素有100%的视口高度

    一、滚动的问题

    推荐数据使用goodslistitem展示时,用了load监听,图片加载完了会通知首页,但是我们不需要通知首页。我们需要区分。发出事件的时候做一下路由判断。

    imageLoad(){
          if(this.$router.path.indexOf('/home')){
            this.$bus.$emit('homeItemImageLoad')
          } else if(this.$router.path.indexOf('/detail')){
            this.$bus.$emit('detailItemImageLoad')
          }
        },
    

    再在详情页监听图片是否加载完成,但是最后离开的时候还是要取消

    详情数据请求

    1.保存从首页商品展示传入的iid
    2.根据iid请求详情数据
    ** 在network的detail.js中封装getDetail,发出网络请求

    一、轮播图的封装

    • 在childComps中创建组件DetailSwiper.vue,在组件中引入公共组件Swiper,SwiperItem,在详情页Detail中引入封装好的DetailSwiper
    • 根据请求到的数据topImages轮播展示商品,定义了一个变量,把topImages进行保存,图片太大了,给swiper设置固定的高度

    二、商品基本信息的封装

    • 抽离组件需要的数据,再把抽离的数据传给组件,把杂乱的数据整合成一个对象,导出class类对象Goods保存的一些商品信息
    • 在childComps中创建组件DetailBaseInfo.vue,封装一些商品基本信息,在详情页Detail中引入封装好的DetailBaseInfo
      • 要先判断是否有商品信息,有再渲染,怎么判断呢?
      • v-if="Object.keys(goods).length !== 0" 看goods是不是一个空的对象

    三、商家基本信息的封装

    • 导出class类对象Shop保存的一些商品信息
    • 在childComps中创建组件DetailShopInfo.vue,封装一些商家信息,在详情页Detail中引入封装好的DetailShopInfo
    • 在显示总销量时,有个过滤器
    filters: {
          sellCountFilter: function (value) {
            if (value < 10000) return value;
            return (value/10000).toFixed(1) + '万'
          }
        }
    

    四、商品详情的封装

    • 在childComps中创建组件DetailGoodsInfo.vue,封装一些商品详细信息,在详情页Detail中引入封装好的DetailGoodsInfo
    • 在滚动的过程中,可能出现不能滚动的现象,是因为better-scroll在计算滚动区域时,图片还没加载出来,所以需要先监听图片是否加载完成
      • 首页要获取图片的个数,然后定义一个计数变量,当两者相等时,就可以发出图片加载完成的事件,
      • 在详情页面中,对滚动区域进行刷新
    // 监听detailInfo这个对象的变化
        watch:{
          detailInfo(){
            //获取图片的个数
            this.imageLength=this.detailInfo.detailImage[0].list.length
          }
        },
        methods: {
          imageLoad(){
            // 先判断一下,只发出一次事件,不然有几张图片就发出几次事件
            // 所有的图片都加载完成之后,进行一次回调
            if(++this.counter===this.imageLength){
              this.$emit('imageLoad')
            }
          }
        },
    

    五、商品参数的封装

    • 导出class类对象GoodsParam保存的一些商品参数信息
    • 在childComps中创建组件DetailParamInfo.vue,封装一些商品参数信息,在详情页Detail中引入封装好的DetailParamInfo
    • 参数用table布局

    六、商品评论信息的封装

    • 评论信息的获取
      ** 在接口的result->rate里面
      ** cRate 当前商品一共有多少评论 点击更多按钮跳转到另一个页面 展示更多评论信息
      ** list[0] 取出一条评论信息在详情页进行展示
      ** 定义commentInfo对象 保存取出来的评论信息 有可能没有评论信息 先判断
    • 评论信息的展示
      ** 在childComps中创建组件DetailCommentInfo.vue,封装一些评论信息,在详情页Detail中引入封装好的DetailCommentInfo
      ** 过滤器将时间格式化 formatDate 从utils中引入
    filters: {
    		  showDate: function (value) {
            // 将时间戳转成Date对象
            let date = new Date(value*1000);
            // 将date进行格式化
            return formatDate(date, 'yyyy/MM/dd')
          }
        }
    

    七、商品推荐信息的封装

    • 推荐数据的获取
      ** 在detail.js中弄一个接口,不用传参数
    export function getRecommend() {
      return request({
        url: '/recommend',
      })
    }
    

    ** 在详情页中将接口函数导入,定义一个recommends数组,在created中请求推荐数据

    • 推荐数据的展示
      ** 不需要创建一个新的子组件,可以直接用之前的GoodsList组件,
      ** 在详情页中导入GoodsList组件并注册使用
      ** 弄个计算属性computed,取展示的图片数据

    首页和详情页监听全局事件的mixin的使用

    ** mixin 混入

    底部工具栏

    底部工具栏

    一、底部工具栏的封装

    二、将商品添加到购物车

    ** 1.给“加入购物车”添加点击事件,发送一个事件,因为是在子组件中监听,

    <div class="cart" @click="addToCart">加入购物车</div>
    methods: {
        addToCart(){
          this.$emit('addCart')
    
        }
      },
    

    ** 2.在详情页中监听点击,先获取商品的信息,这些信息要展示在购物车页面中;

    <detail-bottom-bar @addCart="addToCart"/>
    
    addToCart(){
          // 1.获取购物车需要展示的信息
          const product={}
          product.image=this.topImages[0]
          product.title=this.goods.title
          product.desc=this.goods.desc
          product.cartPrice=this.goods.cartPrice
          product.iid=this.iid
        }
    

    ** 3.将商品添加进购物车,在详情页将商品添加到某个位置,在购物车界面将信息进行展示,用到vuex管理购物车数据

    三、将商品添加到store中

    ** 0.安装vuex npm install vuex --save
    ** 1.在文件夹store中新建一个文件,导入vue,vuex,安装插件,创建store对象,挂载到Vue实例上,在main.js中导入store
    ** 2.定义一个数组变量cartList在其中存放商品,修改任何state中的状态都要通过mutations,mutations中每一个方法完成的事件尽可能单一。
    在index.js中

    const store = new Vuex.Store({
      state:{
        cartList: []
      },
      mutations:{
        addCart(state,payload){
          state.cartList.push(payload);
        }
      }
    });
    

    在Detail.vue中

    addToCart(){
         // 2.将商品添加到购物车
    	//这样做不好,修改vuex中的数据要通过mutations
    	//this.$store.cartList.push(product);
    	this.$store.commit('addCart',product)
    }
    

    此时应该做一个判断,如果添加的是同一个商品的话,cartList的长度不应该变化,而是变化数量。
    用iid来判断。将一个商品添加进购物车,需要根据iid来判断它是不是在原来的cartList里面,如果是,则把该商品数量加1,如果不是,则添加进cartList里面。

    mutations:{
        addCart(state,payload){
          let oldProduct=null;
          for(let item of state.cartList){
            if(item.iid===payload.iid){
              oldProduct=item;
            }
          }
          // 判断oldProduct
          if(oldProduct){
            oldProduct.count+=1;
          }else{
            payload.count=1;
            state.cartList.push(payload);
          }
        }
      },
    
    [ADD_COUNTER](state, payload) {
        payload.count++;
      },
    [ADD_TO_CART](state, payload) {
        state.cartList.push(payload);
      }
    

    ** 3.逻辑判断在actions中

    addCart(context, payload) {
        // 1.查找之前的数组中是否有该商品
        let oldProduct = context.state.cartList.find(
          item => item.iid === payload.iid
        );
        // 2.判断oldProduct
        if (oldProduct) {
          context.commit(ADD_COUNTER, oldProduct);
        } else {
          payload.count = 1;
          context.commit(ADD_TO_CART, payload);
        }
      }
    

    四、添加购物车弹窗

    弹窗
    1.在components的common文件夹中新建一个toast文件夹,因为还可以在其他项目中使用,创建一个Toast组件,
    2.让弹窗垂直水平居中布局,
    3.控制弹窗的显示和隐藏,v-show定义一个变量isShow,默认不显示,属性值设置为false,还定义个弹窗显示内容的变量message,点击“加入购物车”后显示,过一会儿就隐藏,使用定时器
    4.在Detail组件中导入,注册并使用
    5.点击“加入购物车”后显示,过一会儿就隐藏,使用定时器

    if (oldProduct) {
            context.commit(ADD_COUNTER, oldProduct);
            resolve('当前的商品数量+1')
          } else {
            payload.count = 1;
            context.commit(ADD_TO_CART, payload);
            resolve('添加购物车成功')
          }
    
    this.$store.dispatch('addCart',product).then(res=>{
            this.isShow=true;
            this.message=res
            setTimeout(() => {
              this.isShow=false;
              this.message=''
            }, 1500);
    

    另一种封装:
    0.把这个组件封装在一个插件里面,先创建这个组件,最开始的时候就把这个组件添加进body里面,然后安装这个插件,安装这个插件就预备好了
    1.在main.js文件里面导入toast,安装插件,执行install函数,

    import toast from "components/common/toast"
    // 安装toast插件
    Vue.use(toast)
    

    2.在toast文件夹里面新建index文件,在index中导入Toast组件,在install函数里面把需要的东西预备好

    obj.install=function(Vue){
      // 1.创建组件构造器
      const toastContrustor = Vue.extend(Toast)
      // 2.new的方式,根据组件构造器,可以创建一个组件对象
      const toast = new toastContrustor()
      // 3.将组件对象,手动挂载到某一个元素上
      toast.$mount(document.createElement('div'))
      // 4.toast.$el对应的就是div
      document.body.appendChild(toast.$el)
      Vue.prototype.$toast = toast
    }
    

    3.在Toast组件中写一个show方法

    data(){
        return{
          message:'',
          isShow:false
        }
    },
    methods: {
        show(message,duration=2000){
          // duration=duration || 3000
          this.isShow=true;
          this.message=message
          setTimeout(() => {
            this.isShow=false;
            this.message=''
          }, duration);
        }
    }
    

    4.在Detail组件中调用show方法

    this.$store.dispatch('addCart',product).then(res=>{
        this.$toast.show(res,2000)
     })
    
    展开全文
  • vue点击列表进入详情页

    千次阅读 2020-04-07 10:52:47
    获取详情页id 详情页路由(index.js) { path: '/mediaContent/:id', name: 'mediaContent', component: MediaContent }, ...列表页(mediaManagement.vue) <div> <el-table :da...

    获取详情页id

    详情页路由(index.js)

    {
              path: '/mediaContent/:id',
              name: 'mediaContent',
              component: MediaContent
            },
    

    列表页(mediaManagement.vue)

    <div>
          <el-table :data="titleData" style="width: 80%" class="tableStyle">
            <el-table-column prop="mediaTitle"></el-table-column>
            <el-table-column prop="mediaAbstract"></el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                <el-button type="text" @click="detail(scope.row)">更多</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
    
        detail(row) {
          //查看详情
          this.$router.push({ path: "mediaContent/" + row.id });
        },
    

    通过this.$router.push({})实现路由跳转。

    详情页(MediaContent.vue)

    mounted() {
        this.getArticle();
      },
      methods: {
        getArticle() {
          //获取当前页面接收到的id
          this.id = this.$route.params && this.$route.params.id;
          this.$http({
            method: "post",
            url: "/api/getArticle"
          })
            .then(response => {
              for (let i = 0; i < response.data.length; i++) {
                if (this.id === response.data[i].id) {
                  this.$refs.testTable.innerHTML = response.data[i].mediaContent;
                }
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        }
      }
      }
    

    表结构

    在这里插入图片描述
    详情页的id是从表中的id获取到的,通过getArticle()方法从后台获取id

    效果图

    获取到的详情页id效果如下:
    在这里插入图片描述
    参考博客

    展开全文
  • vue列表到详情页的实现

    千次阅读 2020-05-23 16:38:44
    路由里边的 router/index.js path:'/detail/:id' 动态id 列表页渲染时: :to="'/detail/'+item.id" ===>id是指请求文章列表的id,可以是aid,bid等等 ...catid=20&page=1 ...详情页需要请求文.
    路由里边的 router/index.js   path:'/detail/:id' 动态id
    列表页渲染时: :to
    ="'/detail/'+item.id" ===>id是指请求文章列表的id,可以是aid,bid等等 请求列表接口:http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1 点击进入路由变http://localhost:8080/#/detail/456 详情页需要请求文章详情的接口 http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=456, 传入 this.$route.params.id 和路由里面一样的id写死 mounted(){ var aid=this.$route.params.id; //console.log(aid) //调用请求数据的方法 this.requestData(aid); }, methods:{ requestData(aid){ //get请求如果跨域的话 后台php java 里面要允许跨域请求 var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid; this.$http.get(api).then((response)=>{ console.log(response); this.detail=response.data.result[0]; //根据数据结构赋值 },(err)=>{ console.log(err) }) } }

     

    展开全文
  • vue点击跳转到详情页

    万次阅读 2019-05-21 22:56:55
    1商品组件页面GoodsInfo.vue(点击该组件跳转到详情页) <template> <div class="goods-info" @click="goGoodsPage()"> <div class="goods-image"> <img v-lazy="goodsImage"> ...
  • 用户点击商品进入商品详情页,默认显示第一个小图对应的大图,然后鼠标滑到小图上,大图也会发生改变,实现效果如下: 实现代码: shopitem.vue的template(HTML),上面是大图,下面是小图,鼠标滑动到小图上...
  • 当我们获取首页id时候,跳转到相应的详情页,第一次是对应的,然后返回后,第二次进入不同的详情页发现获取的数据显示的内容是第一次的内容,那么我们应该怎么解决呢? 方法一:在详情页的父组件内输入一下生命周期...
  • vue中商品详情页放大镜功能

    千次阅读 2019-07-26 12:28:59
    //点击左右按钮事件ul的li移动,每个li宽74px,ul宽370显示5个li prev(){ //向左移动- if(this.ulIndex>-(this.list.length-5)){ this.ulIndex--; this.marginLeft=this.ulIndex*74; //console.log(this....
  • 文章目录配置动态路由banner.vue公用图片画廊组件拆分src下新建common文件夹banner.vue中使用gallary组件Gallary.vueGallary.vue和Banner.vue最外面大div分别添加点击事件 配置动态路由 新建detail文件夹 ,在Detail...
  • 这个问题 网上有很多相关博客文章 但是有很多人压根自己就没有尝试过 直接ctrl+c +ctrl+v 不知道复制这些干啥呢 实在是遗憾...vue 中 有keep-alive 是 vue内置组件 可以保留原状态 避免重新渲染数据了 我在 app.vue...
  • **APP.vue** ``` <router-view></router-view> ``` **router** ``` { path: '/goods/:goodId', name: "goodsdetail", component: Goods, meta:{keepAlive:false} }, ``` **商品页**...
  • vue项目做的一个“花名册”页面,从“花名册”页面可以点击某一个人的名字,进入这个人的信息详情表格页面,而且这个人的信息详情页面中有一个“直属上级”字段时可以点击跳转的,点击以后跳转到该汇报人的信息详情...
  • vue-element-admin点击进入详情页,侧边栏高亮问题 只需要在meta里面添加activeMenu { path: '/example', component: Layout, redirect: '/example/list', name: 'Example', meta: { title: 'Example', icon...
  • 刚开始我用cookie把这个参数存起来在详情页面取这个参数发现只有第一次取到的是正确的 你在回到父页面在点击详情页发现取到的数据跟原来的一模一样根本没有发生改变(因为router跳转时是不会刷新页面的所以导致我...
  • vue 进入详情页之后,一级菜单不高亮问题详情:尝试解决:分析原因:最终解决问题:解释: 问题详情: 在使用element-ui的NavMenu组件作为导航菜单的时候,我是通过遍历router/index.js里的路由json数组(已定义成...
  • 1)歌手列表点击歌手会跳转到下级页面歌手详情页,歌手详情页由四个部分组成 歌手图片返回按钮:点击返回歌手tab页随机播放按钮歌手歌曲滚动2)歌曲栏向上滚动到顶部时,图片和播放按钮随之隐藏,保留歌手名和返回...
  • 详情页跳转以及制作 1.详情页跳转 利用router来进行页面的跳转,配置详情页的路由,eg:/detail:iid 从首页获取到每个小goodsitem的iid,从而跳转到其相应的详情页,进而获得相应的详情信息。 2.Bug1 解决从其他...
  • vue项目 在一个列表页进入其中一个详情页之后,再返回列表页然后再次进入刚才那个详情页。 请问怎么可以记住那个详情页的浏览位置?
  • 1.先在router.js中配置路由 { path: '/movieDetail/:movieId', name: 'movieDetail', ...2.获取详情页的id,并派发父组件事件(movieList.vue)页面 &lt;li v-for="(item,index) in movies"...
  • 从列表页,进入详情页面,点击返回按钮,定位到原始列表页中对应详情列表项位置。 实现方案 列表页:使用锚点定位实现。列表页dom挂载完成后,判断路由是否有hash,若有页面定位到对应hash的列表项。 <template...
  • vue_music:歌手详情页

    2018-11-13 11:54:06
    在singer.vue中,点击某一歌手,根据路由跳转到singer-detail.vuevue-muscie:singer.vue页面的5.数据序列化后传入list-vue中相关逻辑 selectSinger(singer) { //导航至singer-detail.vue页面 this.$router.push...
  • 移动端开发 vue项目中,ios机器上点击返回列表页的时候,会出现空白现象,触屏一下或者拉动一下,数据才会显示出来,针对此问题,尝试了很多次,最终解决方法如下: 给列表的外层容器加上如下样式: overflow-y: ...
  • Vue中的一个小事例第一步:布局好第一个页面显示,并且在页面上显示一张图片(我的页面显示三张图片) Css.common-form-img {width: 29%;/*border: 1px solid #ffffff;*/height: 200px;float: left;margin-left: 28...
  • vue后台管理中点击跳转详情页以后,显示参数报错为null是怎么回事?
  • vue 实现类似淘宝的商品详情页的商品展示 利用vue和swiper实现缩略图控制 / Swiper互相控制 具体需求描述: 图片大图自动轮播展示,下面的缩略图跟着变化,点击小图切换到对应的大图,大图停止自动轮播 实现代码 ...
  • 1519 弄' }] }, { id: 3, date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }], methods: { //点击显示详情 showDetail(column, row) { //可以做一些判断,对参数进行修改值之类的操作...
  • 父页面向子页面传值,可以通过router传值。...contractManageIndex是显示在导航栏的 再来解释children里面:合同管理是列表页,添加合同和合同详情都是详情页,可以看到详情页都有redirectName: ‘con...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,986
精华内容 794
热门标签
关键字:

vue点击显示详情页

vue 订阅