小程式踩坑（2）

呆呆_呆呆發表於2018-12-29
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);
        }
    }
複製程式碼

相關文章