<template>
<block class="content">
<u-search v-model="search" :showAction="true" @clear="resetDate" @search="searchClick()" @custom="searchClick()"
:animation="false">
</u-search>
<view class="view-container">
<view class="view-item" v-for="(item,index) in showList" :key="index">
<text :data-url="httpUrl+item.title" @click="downloadFile">
{{item.title}}
</text>
</view>
</view>
</block>
</template>
<script>
import dataObject from '@/static/data.js'
export default {
name:"content",
data() {
return {
search: '',
httpUrl:'https://xxx.cn',
showList: [],
newList: []
};
},
onLoad() {
},
mounted() {
this.showList = dataObject.searchDataList;
},
methods: {
searchClick() {
console.log(this.search);
if (this.search !== '') {
this.newList = dataObject.searchDataList.filter(
item =>
item.title.indexOf(this.search) !== -1
);
if (dataObject.searchDataList) {
this.showList = dataObject.searchDataList;
}
}
if (this.newList) {
this.showList = this.newList;
}
},
resetDate() {
this.search = "";
this.showList =dataObject.searchDataList;
},
downloadFile(e) {
let url = e.currentTarget.dataset.url;
uni.downloadFile({
url: url,
success: function(res) {
var filePath = res.tempFilePath;
uni.openDocument({
filePath: filePath,
success: function(res) {
console.log('打开文档成功')
},
fail: function(res) {
console.log(res);
},
complete: function(res) {
console.log(res);
}
})
},
fail: function(res) {
uni.showToast({
title: '暂不支持此类型',
duration: 2000,
icon: "none",
});
},
complete: function(res) {},
})
}
}
}
</script>
<style>
.u-search {
width: 80%;
margin: 60rpx auto !important;
}
.view-container{
width: 90%;
margin:0 auto;
padding-bottom: 40rpx;
}
.view-item{
padding:40rpx 0;
border-bottom: 1px solid #ccc;
}
.view-item:first-child{
border-top: 1px solid #ccc;
}
.view-item:last-child{
border-bottom: none;
}
.view-item text{
font-size: 14px;
}
</style>
uni-app 小程序搜索功能
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- uni-app中微信小程序端使用腾讯地图API实现定位、搜索位置 uni.chooseLocation() 需求:...
- 介绍 3.0 项目重写了~~基于uni-app,colorUI,封装了《自定义TabBar》《上传图片》《全局自定...
- 1.登录功能实现方式: 两种登录模式适用与不同的系统场景, 2.登录流程设计 3.登录步骤实现 (1)用户登录状态...
- uniapp2wxpack QQ群:701697982 访问源码仓库查看最新文档 Uni-App的小程序解耦构建,...