当前文件 searchFilter
this.$http.get('index.php/search/get-search-goods/a_a_a_a_a_a_a_3_-1_a_a_a.shtml').then(response => {
this.lists = response.data.data.list;
// console.log(this.lists)
// 添加地址栏后面参数
// this.$router.push({
// path:'searchList',
// query:{
// ta: this.lists
// }
// })
}, response => {
// error callback
// this.isShow = false
});
请问各位大神 ; 怎么把this.list 这个数据; 传递到其兄弟页面的searchList中; 重新渲染到页面;?????????????????
(根据searchFilter中的筛选条件 把返回的数据重新通过其兄弟searchFlist.vue渲染到页面)
同级文件; searchList 模板 ;
<template>
<div>
<scroller v-show="isShow" v-model="scrollerStatus" height="-46" lock-x scrollbar-y ref="scroller" :bounce="isbounce" :use-pullup="showUp" :pullup-config="upobj" @on-pullup-loading="selPullUp" class="scrollerHeight">
<div class="box2">
<div class="weui-panel weui-panel_access">
<div v-for="list, index in lists" class="weui-panel__bd">
<div class="list_item_pic">
<a :href="`/#/goods/${list.productId}?channelCode=${list.channelCode}`" class="weui-media-box weui-media-box_appmsg">
<span style="font-size:20px;">Loading</span>
<x-img :src="getImagesUrl[index]" :webp-src="`${getImagesUrl[index]}?type=webp`" @on-success="success" @on-error="error" class="ximg-demo" error-class="ximg-error" :offset="-100" container="#vux_view_box_body"></x-img>
</a>
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">{{list.brandName}}</h4>
<p>{{list.productName}}</p>
<strong>¥{{list.salesPrice}}</strong>
<del>¥{{list.etPrice}}</del>
<span>{{list.discount/10}}折</span>
</div>
</div>
</div>
</div>
</scroller>
<loading v-model="showloading" :text="textloading"></loading>
</div>
</template>
<style>
@import './../css/searchList.css';
</style>
<script>
import {
TransferDom,
Popup,
Group,
XSwitch,
Scroller,
Loading,
Panel,
XImg
} from 'vux';
export default {
name: 'searchList',
components: {
TransferDom,
Popup,
Group,
XSwitch,
Scroller,
Loading,
Panel,
XImg
},
directives: {
TransferDom
},
data() {
return {
type: '1',
PageIndex: 1, //页码从第一页开始
PageSize: 20, //每页显示的条数
isShow: false, //是否显示scroller,第一次请求数据过程中隐藏插件,不隐藏的时候会显示“请上拉刷新数据”的字样,不好看
showloading: false,
textloading: '加载中',
showUp: true,
isbounce: false,
lists: [],
upobj: {
content: '请上拉刷新数据',
pullUpHeight: 60,
height: 40,
autoRefresh: false,
downContent: '请上拉刷新数据',
upContent: '请上拉刷新数据',
loadingContent: '加载中...',
clsPrefix: 'xs-plugin-pullup-'
},
isShowLoading: false,
textLoading: '加载中',
scrollerStatus: {
pullupStatus: 'default'
},
scroll: '', // 返回顶部 scrollTop;
show: false, //transferDOM
hasShow: false,
haveShow: false,
getImagesUrl: []
}
},
mounted() {
//第一次加载
this.getNewsList(true);
this.$nextTick(() => {
this.$refs.scroller.reset()
});
},
methods: { //图片懒加载成功
success(list, ele) {
// console.log('success load', list)
const span = ele.parentNode.querySelector('span')
ele.parentNode.removeChild(span)
},
//图片懒加载成功 error(list, ele, msg) {
console.log('error load', msg, list)
const span = ele.parentNode.querySelector('span')
span.innerText = 'load error'
}, //第一次商品列表页加载的时候容易为空true 列表数据渲染加载请求
getNewsList(isEmpty) {
this.showloading = true
var page = this.PageIndex == 1 ? '' : 'currentPage=' + this.PageIndex + '&size=' + this.PageSize;
var param = 'a_a_a_a_a_a_a_a_a_a_a_a.shtml'
var getSearchGoods = window.config.interface.getSearchGoods + param + '?ts=&discountRate=a&word=&' + page;
// 'index.php/search/get-search-goods/a_a_a_a_a_a_a_3_-1_a_a_a.shtml'
this.$http.get(getSearchGoods).then(response => {
// sucess callback
var data = response.data.data.list;
if (isEmpty) {
this.lists = []
this.show = false
} else {
//isEmpty为false时,也就是向上滚动刷新selPullUp ()方法被被调用的时候
if (data && data.length === 0) {
this.showToast = true
this.isShowLoading = false
this.scrollerStatus.pullupStatus = 'disabled' // 禁用下拉
return
}
}
for (var i = 0; i < data.length; i++) {
this.lists.push(data[i]);
} // 获取图片路径
var getImagesUrl = [];
var imagesUrl = this.lists
for (var j = 0; j < imagesUrl.length; j++) {
getImagesUrl.push(imagesUrl[j].imgUrl_300_300.replace(/h_300/g, "h_410"))
}
this.getImagesUrl = getImagesUrl;
this.isShow = true;
this.showloading = false
if (!isEmpty) {
this.scrollerStatus.pullupStatus = 'default'
this.$nextTick(() => {
this.$refs.scroller.reset()
})
}
}, response => {
// error callback
this.isShow = false
});
},
selPullUp() {
this.PageIndex++
this.getNewsList(false)
}
},
activated() {
this.$refs.scroller.reset()
}
}
</script>
this.$http.get('index.php/search/get-search-goods/a_a_a_a_a_a_a_3_-1_a_a_a.shtml').then(response => {
this.lists = response.data.data.list;
// console.log(this.lists)
// 添加地址栏后面参数
// this.$router.push({
// path:'searchList',
// query:{
// ta: this.lists
// }
// })
}, response => {
// error callback
// this.isShow = false
});
请问各位大神 ; 怎么把this.list 这个数据; 传递到其兄弟页面的searchList中; 重新渲染到页面;?????????????????
(根据searchFilter中的筛选条件 把返回的数据重新通过其兄弟searchFlist.vue渲染到页面)
同级文件; searchList 模板 ;
<template>
<div>
<scroller v-show="isShow" v-model="scrollerStatus" height="-46" lock-x scrollbar-y ref="scroller" :bounce="isbounce" :use-pullup="showUp" :pullup-config="upobj" @on-pullup-loading="selPullUp" class="scrollerHeight">
<div class="box2">
<div class="weui-panel weui-panel_access">
<div v-for="list, index in lists" class="weui-panel__bd">
<div class="list_item_pic">
<a :href="`/#/goods/${list.productId}?channelCode=${list.channelCode}`" class="weui-media-box weui-media-box_appmsg">
<span style="font-size:20px;">Loading</span>
<x-img :src="getImagesUrl[index]" :webp-src="`${getImagesUrl[index]}?type=webp`" @on-success="success" @on-error="error" class="ximg-demo" error-class="ximg-error" :offset="-100" container="#vux_view_box_body"></x-img>
</a>
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">{{list.brandName}}</h4>
<p>{{list.productName}}</p>
<strong>¥{{list.salesPrice}}</strong>
<del>¥{{list.etPrice}}</del>
<span>{{list.discount/10}}折</span>
</div>
</div>
</div>
</div>
</scroller>
<loading v-model="showloading" :text="textloading"></loading>
</div>
</template>
<style>
@import './../css/searchList.css';
</style>
<script>
import {
TransferDom,
Popup,
Group,
XSwitch,
Scroller,
Loading,
Panel,
XImg
} from 'vux';
export default {
name: 'searchList',
components: {
TransferDom,
Popup,
Group,
XSwitch,
Scroller,
Loading,
Panel,
XImg
},
directives: {
TransferDom
},
data() {
return {
type: '1',
PageIndex: 1, //页码从第一页开始
PageSize: 20, //每页显示的条数
isShow: false, //是否显示scroller,第一次请求数据过程中隐藏插件,不隐藏的时候会显示“请上拉刷新数据”的字样,不好看
showloading: false,
textloading: '加载中',
showUp: true,
isbounce: false,
lists: [],
upobj: {
content: '请上拉刷新数据',
pullUpHeight: 60,
height: 40,
autoRefresh: false,
downContent: '请上拉刷新数据',
upContent: '请上拉刷新数据',
loadingContent: '加载中...',
clsPrefix: 'xs-plugin-pullup-'
},
isShowLoading: false,
textLoading: '加载中',
scrollerStatus: {
pullupStatus: 'default'
},
scroll: '', // 返回顶部 scrollTop;
show: false, //transferDOM
hasShow: false,
haveShow: false,
getImagesUrl: []
}
},
mounted() {
//第一次加载
this.getNewsList(true);
this.$nextTick(() => {
this.$refs.scroller.reset()
});
},
methods: { //图片懒加载成功
success(list, ele) {
// console.log('success load', list)
const span = ele.parentNode.querySelector('span')
ele.parentNode.removeChild(span)
},
//图片懒加载成功 error(list, ele, msg) {
console.log('error load', msg, list)
const span = ele.parentNode.querySelector('span')
span.innerText = 'load error'
}, //第一次商品列表页加载的时候容易为空true 列表数据渲染加载请求
getNewsList(isEmpty) {
this.showloading = true
var page = this.PageIndex == 1 ? '' : 'currentPage=' + this.PageIndex + '&size=' + this.PageSize;
var param = 'a_a_a_a_a_a_a_a_a_a_a_a.shtml'
var getSearchGoods = window.config.interface.getSearchGoods + param + '?ts=&discountRate=a&word=&' + page;
// 'index.php/search/get-search-goods/a_a_a_a_a_a_a_3_-1_a_a_a.shtml'
this.$http.get(getSearchGoods).then(response => {
// sucess callback
var data = response.data.data.list;
if (isEmpty) {
this.lists = []
this.show = false
} else {
//isEmpty为false时,也就是向上滚动刷新selPullUp ()方法被被调用的时候
if (data && data.length === 0) {
this.showToast = true
this.isShowLoading = false
this.scrollerStatus.pullupStatus = 'disabled' // 禁用下拉
return
}
}
for (var i = 0; i < data.length; i++) {
this.lists.push(data[i]);
} // 获取图片路径
var getImagesUrl = [];
var imagesUrl = this.lists
for (var j = 0; j < imagesUrl.length; j++) {
getImagesUrl.push(imagesUrl[j].imgUrl_300_300.replace(/h_300/g, "h_410"))
}
this.getImagesUrl = getImagesUrl;
this.isShow = true;
this.showloading = false
if (!isEmpty) {
this.scrollerStatus.pullupStatus = 'default'
this.$nextTick(() => {
this.$refs.scroller.reset()
})
}
}, response => {
// error callback
this.isShow = false
});
},
selPullUp() {
this.PageIndex++
this.getNewsList(false)
}
},
activated() {
this.$refs.scroller.reset()
}
}
</script>
解决方案 »
- ExtJs 动态获取数据
- 问一个低级问题,一个函数找不到在哪调用的
- ul li弹出菜单问题
- 如何使用js读取文本框中的值,并用此值与表的一列值分别相乘,结果分别赋值给对应的另一列,谢谢
- 大家能帮我看下这个json的文件写的对不对?怎么数据读不出来总出错?
- 在线求救!一个好象不可能解决的问题,哪个高手帮帮我。(打开一个新页面,但仅执行onload的javascript事件,而不要看到新页面刷新。)
- 如何判断列表框中某一项是否被选中
- 怎样知道focus是否停留在某个控件上,急等。。。
- jsp和Javescript还不一样吗。有什么区别
- 在web页面上,如何动态限制用户可否在某些输入框输入内容..
- jquery的datagrid的combobox,如何在点击一个按钮后,让combox中的下拉列表的值value变成指定的值。
- iscroll问题
2.可以使用ref引用后传递
3.可以使用本地缓存传递
4.可以...