目次
序文
この記事には、より純粋なコード、詳細な説明があり、より詳細な説明は今後提供されます
結果を示す
保存されたコンテンツは長押しで削除できます. ビデオの長さの理由は1つずつ表示されません. 具体的な効果は次のとおりです.
メインコンテンツ
ここで one-adv はカプセル化されたコンポーネントであり、コードの再利用を改善し、コードの長さをより適切に削減し、独自のバックグラウンド データベースのコンテンツに従ってコンテンツをレンダリングします。次のコード スニペットとカプセル化されたコードのように、このコンポーネントの使用
<template>
<view class="oneadv">
<view v-if="title" class="pl-1">{
{title}}</view>
<image v-if="cover" :src="cover" :class="isshowstyle?'getImage':''" @click="removeAll"></image>
<slot></slot>
</view>
</template>
<script>
export default {
data() {
return {
}
},
props: {
title: {
type: String
},
cover: {
type: String
},
isshowstyle: {
type: Boolean
}
},
methods: {
removeAll(){
this.$emit('removeall')
}
}
}
</script>
<style scoped>
.oneadv {
position: relative;
}
.title {
font-size: 28rpx;
padding: 0 0 8rpx 20rpx;
}
image {
width: 750rpx;
height: 350rpx;
}
.getImage {
width:40rpx;
height:44rpx;
position: absolute;
top:0rpx;
right:40rpx;
}
</style>
この終了コードは、自分で作成した不要なデータをレンダリングするためのものであり、ページのパフォーマンスをデバッグしてユーザー エクスペリエンスを向上させるためのいくつかの基本的なスタイルです。
<template>
<view>
<u-search placeholder="请输入搜索内容" v-model="keyword" :animation="true" @custom="custom" @change="changeinput" @blur="blurinput"></u-search>
<one-adv title="热门搜索" cover="../../pagesA/static/images/demo/demo4.jpg">
<color-tag v-for="(item,index) in hot" :key="index" :item="item" :color="true" @click.native="sumbitkey(item)"></color-tag>
</one-adv>
<divider></divider>
<one-adv title="常用分类">
<color-tag v-for="(item,index) in cate" :key="index" :item="item" :color="false" @click.native="sumbitkey(item)"></color-tag>
</one-adv>
<divider></divider>
<one-adv title="历史记录" cover="../../pagesA/static/images/demo/del.png" :isshowstyle="true" @removeall="removeAll">
<color-tag v-for="(item,index) in searchList" :key="index" :item="{name:item}" :color="false" @longpress="longpress(index)" class="position-relative" @click.native="sumbitkey(item)">
<icon type="clear" size="16" class="position-absolute icon" v-if="isshow&¤tIndex==index" @tap="removeItem(index)"/>
</color-tag>
</one-adv>
</view>
</template>
<script>
export default {
data() {
return {
keyword: '',
currentIndex:0,
isshow:false,//删除图标
searchList: [], //存储的搜索的内容
hot: [{
name: '领券中心'
},
{
name: 'Redmi K20'
},
{
name: 'RedmiBook 14'
},
{
name: '智能积木 越野四驱车'
},
{
name: '手环 腕带'
},
],
cate: [{
name: '耳机'
},
{
name: '手机'
},
{
name: '音箱'
},
{
name: '手表'
},
{
name: '配件'
},
{
name: '网关/传感器'
},
{
name: '健康'
},
{
name: '酷玩'
},
]
}
},より完全な検索ページを実現するには、合計 8 つの要件があります。
1.検索ボックスをクリアし、要素コンポーネントでAPIを使用して達成し、検索ボックスのコンテンツを削除すると、次の検索をすばやく実行できます
2.検索をクリックし、uniappコンポーネントを使用してプロンプトを表示し、入力が書き込まれていない場合にポップアップウィンドウを表示します。後者の機能は、検索コンテンツをブラウザに保存してから、対応するページにジャンプします
3. 検索内容の変更は、単純に入力内容の形式を制御するためのものであり、形式判定は正規表現に基づいており、正しくない場合は、uniapp のプロンプト ボックスを使用してポップアップ ウィンドウを表示します。
4. 焦点が合っていない場合は、検索ボックスと連携して、検索ボックスの使用体験を向上させます
5.すべて削除、検索後に保存されたコンテンツを削除します。これはブラウザに保存されているため、閲覧中のデータを削除します。表面のコンテンツを削除するだけではなく、データを削除して確実に削除する必要がありますデータの削除について言及していない場合、リフレッシュ後に再レンダリングされることがわかっている、つまり削除されていないことを意味するため、保存されたデータは必ず削除
6, 7. ワンピースと組み合わせて使用し、単一の要素を選択してから、個別に選択したオプションを削除すると、個別に削除できます. 削除したいものを削除する場合は、検索レコードを削除し、これにより、よりユーザーフレンドリーになります。
8. 検索レコードをクリックすると、検索ボックスに直接レンダリングされ、履歴レコードのコンテンツを検索し、以前のコンテンツを再度検索したい顧客のユーザー エクスペリエンスを向上させます。
mounted() {
let his = uni.getStorageSync('history_key')
this.searchList = his||[]
console.log(this.searchList);
},
methods: {
//点击清空搜索框
clear() {
this.keyword = ''
},
//点击搜索
custom(value) {
if (this.keyword == '') {
uni.showToast({
title: '搜索内容不能为空',
icon: 'none'
})
return;
} else {
let index = this.searchList.indexOf(this.keyword)
if (index === -1) {
this.searchList.unshift(this.keyword)
uni.setStorageSync('history_key', this.searchList);
} else {
this.searchList.unshift(this.searchList.splice(index, 1)[0])
uni.setStorageSync('history_key', this.searchList);
}
uni.navigateTo({
url:`../choose/choose?key=${this.keyword}`
})
}
},
//搜索内容改变
changeinput() {
var partten = /^(?!(\s+$))/; //正则表达式规则
let val = this.keyword
if (!partten.test(val)) {
uni.showToast({
title: '请不要输入空白字符',
icon: 'none'
})
return;
}
},
//失焦
blurinput() {
this.keyword = this.keyword.trim()
},
//删除所有
removeAll() {
uni.showModal({
title: '提示',
content: '您确定要删除所有历史记录吗',
success: (res)=> {
if (res.confirm) {
uni.removeStorageSync('history_key');
this.searchList = []
} else if (res.cancel) {
return;
}
}
})
},
//长按
longpress(index){
console.log(index);
this.isshow = true
this.currentIndex = index
},
//移除单个搜索记录
removeItem(i){
this.searchList.splice(i,1)
uni.setStorageSync('history_key', this.searchList);
},
//点击按钮进入搜索
sumbitkey(item){
console.log(item);
if(item.name){
this.keyword = item.name
}else {
this.keyword = item
}
}
}
}
</script>
<style scoped lang="scss">
/* sass中的样式穿透 */
/deep/ .u-search {
margin: 0 0 20rpx 0 !important;
}
.icon {
right:0;
}
</style>閉会の辞:
今回のコンテンツ共有はここまでです. より詳しい機能説明は次の記事で紹介します. スペースの長さを減らすために, それらは別々に紹介されます.
