小程序的坑和技巧基本功能：位于一个页面非顶部的元素，随着滚动条滚动会自动吸附到指定位置。特点是：父容器overflow

position:stick;

基本功能：位于一个页面非顶部的元素，随着滚动条滚动会自动吸附到指定位置。
特点是：父容器overflow必须是visible。
问题：网上有博客说
1、z-index 设置无效；
2、当父元素的height：100%时，页面滑动到一定高度之后sticky属性会失效。
这两个问题我没有遇到，为什么？
效果滚动前：

滚动后：

<view class="wrap">
  <view class="search-item">1</view>
  <view class="search-item">2</view>
  <view class="top-item">stick</view>
  <view class="goods-list">
    <scroll-view scroll-y>
 到南京时，有朋友约去游逛，勾留7了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房8陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖9；颇踌躇10了一会。其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。他踌躇了一会，终于决定还是自己送我去。我再三劝他不必去；他只说：“不要紧，他们去不好！”
我们过了江，进了车站。我买票，他忙着照看行李。行李太多，得向脚夫11行些小费才可过去。他便又忙着和他们讲价钱。我那时真是聪明过分，总觉他说话不大漂亮，非自己插嘴不可，但他终于讲定了价钱；就送我上车。他给我拣定了靠车门的一张椅子；我将他给我做的紫毛大衣铺好座位。他嘱我路上小心，夜里要警醒些，不要受凉。又嘱托茶房好好照应我。我心里暗笑他的迂；他们只认得钱，托他们只是白托！而且我这样大年纪的人，难道还不能料理自己么？我现在想想，我那时真是太聪明了。
我说道：“爸爸，你走吧。”他往车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂12，深青布棉袍，蹒跚13地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。这时我看见他的背影，我的泪很快地流下来了。我赶紧拭干了泪。怕他看见，也怕别人看见。我再向外看时，他已抱了朱红的橘子往回走了。过铁道时，他先将橘子散放在地上，自己慢慢爬下，再抱起橘子走。到这边时，我赶紧去搀他。他和我走到车上，将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土，心里很轻松似的。过一会儿说：“我走了，到那边来信！”我望着他走出去。他走了几步，回过头看见我，说：“进去吧，里边没人。”等他的背影混入来来往往的人里，再找不着了，我便进来坐下，我的眼泪又来了。
    。。。
    这里多加一些
    </scroll-view>
  </view>
</view>

    .wrap{
      width: 100%;
      color: wheat;
      height: 100%;
      /* overflow: auto; */
    }
    .search-item{
      height: 500rpx;
      background-color: blue;
    }
    .top-item{
      position: -webkit-sticky;
      position: sticky;
      top: 0rpx;
      z-index: 3;
      background-color: gray;
    }
    .goods-list{
      color: white;
      background-color: red;
    }

首页广告

首页全屏显示广告，并可以关闭，实现自定义Modal。

<view class="wrap" wx:if="{{showModal}}" catchtouchmove="noneEnoughPeople">
  <image mode="aspectFit" class="first-sight" src="/static/first-sight.jpg"></image>
  <image mode="aspectFit" class="close_circle" src="/static/close_circle.png" bindtap="close"></image>
</view>

原理很简单：最外层wrap是flex布局，并且是固定定位。这里的技巧是图片显示采用 mode="aspectFit"，缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

scroll-view 的 scroll-top 属性

scroll-view要设置height，scroll-top=0才会返回到顶部

文字滚动

技巧点：

wx:if会重新渲染，添加动画类，触发动画；
setInterval(()=>{}, 5000); 每隔 5秒执行一次，加上动画，这个值要改一下。

<view class="roll-wrap">
  <view><image src="/static/horn.png" class="roll-image"></image></view>
  <view class="text-wrap">
    <view wx:if="{{pauseRoll}}" class="textPre">
      <text class="roll-item">{{rollArr[curIndex]}}</text>
      <text class="roll-item">{{rollArr[nextIndex]}}</text>
    </view>
    <view wx:if="{{!pauseRoll}}" class="textPre">
      <text class="roll-item">{{rollArr[curIndex]}}</text>
      <text class="roll-item">{{rollArr[nextIndex]}}</text>
     </view>
  </view>
</view>

顶部自定义banner

在.json文件中修改配置： "navigationStyle": "custom"
自定义顶部banner。
适配兼容各种机型：可以利用 wx.getMenuButtonBoundingClientRect();获取胶囊按钮的位置，接下来就可以为所欲为了。

小程序的生命周期

小程序的一辈子：打开小程序：(App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onReady 进入下一个页面：(Pages)onHide --> (Next)onLoad --> (Next)onShow --> (Next)onReady 返回上一个页面：(curr)onUnload --> (pre)onShow 离开小程序：(App)onHide 再次进入：小程序未销毁 --> (App)onShow(执行上面的顺序），小程序被销毁，（App)onLaunch重新开始执行.

作者：虞小只链接：juejin.cn/post/684490… 来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

组件技巧

父组件向子组件传值

//在父组件中引用子组件
<poster wx:if="{{posterModal}}" activityId="{{activityId}}" bind:closePoster="onClosePoster"/>

如上，在父组件中引用子组件。activityId会被传给子组件。

  /**
   * 组件的属性列表
   */
  properties: {
    activityId: {
      type: String,
      value: ''
    }
  },

子组件触发父组件的方法

//在父组件中引用子组件
<poster wx:if="{{posterModal}}" activityId="{{activityId}}" bind:closePoster="onClosePoster"/>

父组件的onClosePoster被绑定在子组件上，子组件可以调用：

    //子组件调用
    close:function(e) {
      this.triggerEvent('closePoster');
    },

保存图片到手机相册

blog.csdn.net/m0_38134431… 这篇博客是介绍了很好的思路。我对它进行了优化。刚开始我很纳闷为什么要分第一次？为什么要分第一次呢？因为如果不判断第一次的话，直接wx.openSetting不久可以了吗？事实是如果直接wx.openSetting，会出现下面的结果

这显然不是我们想要的。好了，说下我的思路：

保存图片的时候，首先根据 wx.getSetting 来判断当前用户所有的权限；
判断 authSetting.hasOwnProperty('scope.writePhotosAlbum')，为什么要判断呢？上面已经说了。
如果没有scope.writePhotosAlbum'这个属性，那么说明没有进行权限的询问，执行wx.authorize({ scope: 'scope.writePhotosAlbum'})

4. 如果有scope.writePhotosAlbum'这个属性，那么说明已经进行过权限的询问，执行wx.openSetting；