小程序踩坑（2）

1，小程序的键盘唤起功能 搜索文字 和监听回车键

<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}}"
      监听回车键：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);
        }
    }