1，小程式的鍵盤喚起功能 搜尋文字 和監聽Enter鍵
<input
class="inputs"
type='text'
value='{{goodsKeywords}}'
placeholder="搜尋商品名稱或貼上寶貝標題"
bindinput='onChangeValue'
focus="{{true}}"
bindfocus="bindfocusFun"
bindblur="bindblurFun"
confirm-type="search"
bindconfirm="bindconfirmFun"
/>
注意：設定搜尋 ：type='text' confirm-type="search"這兩個同時設定才可以
鍵盤喚起功能：focus="{{true}}"
監聽Enter鍵：bindconfirm="bindconfirmFun" 注意 監聽換車建和完成鍵使用的方法是不一樣的
複製程式碼
2,彈窗上滑動 動畫 很多情況下彈窗從底部或者頂部滑出 需要一個過程
.slide-top {
-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
}
@keyframes slide-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
}
注意：最外層的蒙層需要使用rgba，這樣不會讓內容模糊
內容部分的向上滑動是這樣的：animation transform的相容寫法
複製程式碼
3，過濾效果
高斯模糊 在使用swiper的時候，當圖片和高斯模糊背景需要動態一致的時候
可以讓背景和圖片是同一張圖片 然後把背景進行濾鏡設定
-webkit-filter: blur(30rpx);
-moz-filter: blur(30rpx);
-ms-filter: blur(30rpx);
filter: blur(30rpx);
複製程式碼
4，粘性佈局 吸頂效果
想實現滾動到指定高度 指定部分固定在頂部 如果使用scroll-view 或者監聽全域性
判斷滾動高度來改變position的fixed的屬性 這樣很麻煩 而且臨界值不好處理
有時候會出現卡頓的情況可以這樣寫:
直接父元素設定 overflow:visible;
當前元素這樣寫即可：
position: sticky;
position: -webkit-sticky;
left:0;
這樣相容性也不錯
複製程式碼
5，swiper 和scroll-view不一樣的用法
可以充當tab建，配合scroll-view可以做到分頁 可以禁用掉手勢 但是不影響下拉分頁的實現
<template>
<view class="container">
<view class="tabs">
<view
class="tab tabL {{current === 0 ? 'active':''}}"
@tap.stop="changeTab('left')">
tab1
</view>
<view
class="tab {{current === 0 ? '':'active'}}"
@tap.stop="changeTab('right')">
tab2
</view>
</view>
<swiper
duration="{{500}}"
indicator-dots="{{false}}"
autoplay="{{false}}"
current="{{current}}"
bindchange="bindChange"
class="innerSwiper"
style="height:{{Hheight-90}}px;"
wx:if="{{!isShowHistory}}"
>
<swiper-item class="swiperItem" catchtouchmove="stopTouchMove">
<scroll-view
style="height:{{Hheight-90}}px;"
scroll-y
class="scroll_wrap"
bindscrolltolower="lower"
>
<view class="item_list" wx:if="{{goodsList && goodsList.length>0}}">
<repeat for="{{goodsList}}" index="index" key="index" item="item">
<GoodsItem :goodsItem.sync="item" :type.sync="type"/>
</repeat>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiperItem" catchtouchmove="stopTouchMove">
<scroll-view
style="height:{{Hheight-90}}px;"
scroll-y
class="scroll_wrap"
bindscrolltolower="lower"
>
<view class="item_list" wx:if="{{goodsList && goodsList.length>0}}">
<repeat for="{{goodsList}}" index="index" key="index" item="item">
<GoodsItem :goodsItem.sync="item" :type.sync="type"/>
</repeat>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import wepy from 'wepy';
import GoodsItem from '@/components/Parts/goodsItem'
export default class Search extends wepy.page {
config = {
enablePullDownRefresh: false,
backgroundTextStyle: '#000',
onReachBottomDistance: 50,
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: '搜尋',
navigationBarTextStyle: 'black'
};
components = {
GoodsItem
};
data = {
type:'out',// 外部連結
current:0, // 當前tab的下標
Hheight:0,// 預設頁面高度
goodsList:[],// 列表資料one
currentPage: 1,
pageSize: 10,
csource: 'PinDuoDuo',
operateId:'S1000',
hasMore: false,// 是否載入下一頁
isShowLoading: false,
xhrFlag: false,// 是否已經請求過介面了
guassYouLikeArr:[],// 推薦商品
};
methods = {
stopTouchMove: function() { // 禁用掉手指滑動事件
return false;
},
lower:()=>{ // 滑動觸底分頁
if(this.hasMore&& this.xhrFlag){
const currentP=this.currentPage+1;
this.currentPage=currentP;
this.$apply();
this.getDatas(true)
}
},
bindChange: (e)=>{
const { detail: { current } } = e;
this.current = current;
if(current === 0){
this.csource= 'JD';
this.$apply();
this.getDatas(false);
}else{
this.csource= 'PinDuoDuo';
this.$apply();
this.getDatas(false);
}
},
changeTab: (arg)=>{
switch (arg) {
case 'left':
this.current = 0;
this.$apply();
break;
case 'right':
this.current = 1;
this.$apply();
default:
break;
}
},
};
// 獲取列表資料
getDatas=async(flage)=> {
const res = await home.getGoodsSearch({...this.params});
if(res&&res.data && res.data.code==='0'){
if(flage){
this.goodsList=this.goodsList.concat(res.data.data.items);
this.hasMore=res.data.data.hasMore;
this.currentPage=res.data.data.currentPage;
this.$apply();
}else{
this.goodsList=res.data.data.items;
this.hasMore=res.data.data.hasMore;
this.currentPage=res.data.data.currentPage;
this.$apply();
}
this.isShowLoading=false;
this.xhrFlag=true;
this.$apply();
}else{
this.isShowLoading=false;
this.xhrFlag=true;
this.$apply();
this.$invoke('toast', 'show', `${res.data.msg}`, 'bottom');
}
};
onShow() {
}
onLoad(params) {
wx.getSystemInfo({
success: (res) =>{
const Hheights= res.windowHeight;
this.Hheight=Hheights;
this.$apply();
},
});
}
}
</script>
複製程式碼
6，背景圖片不可以是本地檔案 需要是網路圖片/base64才可以 設定圖片的相容性 如下
當圖書是背景圖片的時候在模擬器上還可以 但是打包後會找不到圖片 所以建議使用網路圖片或者是base64
background: url("https://img.igowu123.com/img/qz/minwxapp/mask.png");
background-size: contain;
複製程式碼
7，scroll-view橫向滑動效果
<view class="scroll_box"
wx:if="{{themeList && themeList.length>1}}"
>
<scroll-view
scroll-x
style="width: auto;overflow:hidden;" >
<repeat for="{{themeList}}" index="index" key="key" item="x">
<view
class="{{themeId===x.themeId?'active':''}} event_items"
@tap.stop="checkedThemeIdFun({{x.themeId}})"
>
{{x.themeName}}
</view>
</repeat>
</scroll-view>
</view>
.scroll_box{ // 注意 最外層需要設定100%的寬度
width: 100%;
height: 89rpx;
overflow: hidden;
white-space: nowrap;
.event_items{ // 記憶體滾動元素
margin-right: 20rpx;
display: inline-block;
width:177rpx;
height: 89rpx;
}
.active{
color:rgba(255,92,55,1);
}
}
複製程式碼