微信小程序實現各類特效實例

寫在前面

最近在負責一個微信小程序的前端以及先後端接口的對接的項目，總體上全部頁面的佈局我都已經搭建完成，裏面有一些經常使用的特效，總結一下，但願對你們和我都能有所幫助

實例1：滾動tab選項卡

先看一下效果圖吧，可以點擊菜單或滑動頁面切換，tab菜單部分能夠實現左右滾動

好了，看一下個人源碼吧！<喜歡的話拿走不謝喲>

一、wxml

<!-- tab header -->
    <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
      <view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">所有</view>
      <view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">營銷系統</view>
      <view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">家居建材</view>
      <view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">美妝護膚</view>
      <view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">數碼電器</view>
      <view class="tab-item {{currentTab==5?'active':''}}" data-current="5" bindtap="swichNav">母嬰玩具</view>
      <view class="tab-item {{currentTab==6?'active':''}}" data-current="6" bindtap="swichNav">零元購活動</view>
    </scroll-view>
    <!-- tab content -->
    <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab" style="max-height:{{winHeight}}rpx">
      <swiper-item wx:for="{{[0,1,2,3,4,5,6]}}">
        <scroll-view scroll-y="true" class="scoll-h">
          <block wx:for="{{[1,2,3,4,5,6,7]}}" wx:key="*this">
            <view class='goods-Wrapper'>
              <image mode='widthFix' class="goods-img" src='../../image/goods1.jpg'></image>
              <view class="goods-info">
                <view>周邊團門店微營銷系統年費</view>
                <view>
                  <text class='price'>¥298.00</text> 
                  <text class='line-delete'>
                    ¥298.00
                  </text>
                  <label>
                    <button><image mode='widthFix' src='../../image/icon1.png'></image>1人團</button>
                    <button><image mode='widthFix' src='../../image/icon2.png'></image>去開團</button>
                  </label>
                </view>
              </view>              
            </view>
          </block>
        </scroll-view>
      </swiper-item>
    </swiper>

okaychen

 二、wxss <我只展現了tab菜單處的wxss，頁面的樣式就不在列出>

.tab-h {
  height: 80rpx;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 80rpx;
  background: #f7f7f7;
  font-size: 14px;
  white-space: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

.tab-item {
  margin: 0 36rpx;
  display: inline-block;
}

.tab-item.active {
  color: #4675f9;
  position: relative;
}

.tab-h .tab-item.active:after {
  content: "";
  display: block;
  height: 8rpx;
  width: 115rpx;
  background: #4675f9;
  position: absolute;
  bottom: 0;
  left: 5rpx;
  border-radius: 16rpx;
}

.tab-h .tab-item:nth-child(1).active:after {
  width: 52rpx;
}

okaychen

 三、js

var app = getApp();
Page({
  data: {
    winHeight: "",//窗口高度
    currentTab: 0, //預設當前項的值
    scrollLeft: 0, //tab標題的滾動條位置
    expertList: [{ //假數據
      img: "",
      name: "",
      tag: "",
      answer: 134,
      listen: 2234
    }]
  },
  // 滾動切換標籤樣式
  switchTab: function (e) {
    this.setData({
      currentTab: e.detail.current
    });
    this.checkCor();
  },
  // 點擊標題切換當前頁時改變樣式
  swichNav: function (e) {
    var cur = e.target.dataset.current;
    if (this.data.currentTaB == cur) { return false; }
    else {
      this.setData({
        currentTab: cur
      })
    }
  },
  //判斷當前滾動超過一屏時，設置tab標題滾動條。
  checkCor: function () {
    if (this.data.currentTab > 4) {
      this.setData({
        scrollLeft: 300
      })
    } else {
      this.setData({
        scrollLeft: 0
      })
    }
  },
  onLoad: function () {
    var that = this;
    //  高度自適應
    wx.getSystemInfo({
      success: function (res) {
        var clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
        var calc = clientHeight * rpxR - 180;
        console.log(calc)
        that.setData({
          winHeight: calc
        });
      }
    });
  },
  footerTap: app.footerTap
})

okaychen

實例2：星級評分

按照慣例先上效果圖，默認一星，點擊能夠選擇星級，可半星顯示。

一、wxml

 <view class='accessWrapper'> 
  <view class='title'>
     評價 
    <view class='starsWrapper'>
      <block wx:for="{{stars}}">
        <image class="star-image" style="left: {{item*50}}rpx" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">
          <view class="item" style="left:0rpx" data-key="{{item+0.5}}" bindtap="selectLeft"></view>
          <view class="item" style="left:25rpx" data-key="{{item+1}}" bindtap="selectRight"></view>
        </image>
      </block>
      </view> 
  </view>
  
  <!-- 這裏綁定是bindInput而不是bindtab -->
  <textarea bindinput='textAreaCon' placeholder='寫點什麼吧...' auto-focus='true'></textarea> 
  <view class='uploadFile' bindtap='upload'>+</view> 
 </view>

 <button type='submit' bindtap='saveAccess' class='save-edit'>提交保存</button> 

 

okaychen

二、wxss

page{
  background: #f5f5f5;
}

.accessWrapper{
  background: #fff;
  font-size: 14px;
  padding-bottom: 10px;
}

.accessWrapper textarea{
  width: 94%;
  margin: 0 auto;
  max-height: 200px;
  border-top: 1px solid #f5f5f5;
  padding: 10px 0px;
}

.accessWrapper textarea::-webkit-scrollbar{
  width: 0px;
  height: 0px;
  color: transparent;
}

.accessWrapper .title{
  padding: 10px;
}
.starsWrapper{
  position: absolute;
  top: -20px;
  right: 135px;
}
/* stars */
.star-image {
  position: absolute;
  top: 50rpx;
  width: 50rpx;
  height: 50rpx;
  src: "../../../image/normal.png";
}

.item {
  position: absolute;
  top: 0rpx;
  width: 50rpx;
  height: 50rpx;
}

.uploadFile{
  width: 50px;
  height: 50px;
  border: 1px solid #f5f5f5;
  color: #999;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  margin-left: 10px;
}

okaychen

三、js

var app = getApp()
Page({
  data: {
    stars: [0, 1, 2, 3, 4],
    normalSrc: '../../../image/normal.png',
    selectedSrc: '../../../image/selected.png',
    halfSrc: '../../../image/half.png',
    key: 1,//評分
    path: ' ',
    userInput:' '
  },
  onLoad: function () {
    
  },

  //點擊右邊,半顆星
  selectLeft: function (e) {
    var key = e.currentTarget.dataset.key
    if (this.data.key == 0.5 && e.currentTarget.dataset.key == 0.5) {
      //只有一顆星的時候,再次點擊,變爲0顆
      key = 0;
    }
    console.log("得" + key + "分")
    this.setData({
      key: key
    })

  },
  //點擊左邊,整顆星
  selectRight: function (e) {
    var key = e.currentTarget.dataset.key
    console.log("得" + key + "分")
    this.setData({
      key: key
    })
  },



   upload: function () {
    var that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        var tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)
        wx.uploadFile({
          url: 'http://example.weixin.qq.com/upload',
          filePath: tempFilePaths[0],
          name: 'file',
          formData: {
            'user': 'test'
          },
          success: function (res) {
            var data = res.data
            wx.showModal({
              title: '上傳文件返回狀態',
              content: '成功',
              success: function (res) {
                if (res.confirm) {
                  console.log('用戶點擊肯定')
                }
              }
            })                          //do something
          },
          fail: function (res) {
            console.log(res)
          }
        })
        that.setData({
          path: tempFilePaths
        })
      }
    })
  },
  

   textAreaCon:function(e){
     var that = this;
     that.setData({
       userInput: e.detail.value,
     })
   },
   saveAccess:function(e){
     if(this.data.userInput == ' '){
       wx.showModal({
         title: '提示',
         content: '對不起，請輸入留言內容',
       })
     }else{
      console.log(this.data.userInput);
      //  成功監聽用戶輸入內容


     }
   }

})

okaychen

實例3：自定義底部彈出層

自定義底部彈出層，在電商的小程序中常常會用到，根據須要自定義彈出內容，先看下個人效果

 

我已經把我自定義的部分抽離了出來

一、wxml

<view class='yourPurse' bindtap='showModal1'></view>

<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"></view>

okaychen

二、wxss

.commodity_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}

.commodity_attr_box {
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding-top: 20rpx;
}

okaychen

三、js

showModal: function () {
    // 顯示遮罩層
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
      animationData: animation.export(),
      showModalStatus: true
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 200)
  },
  hideModal: function () {
    // 隱藏遮罩層
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
      animationData: animation.export(),
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        showModalStatus: false
      })
    }.bind(this), 200)
  }

okaychen

寫在後面

此次沒有文字化的知識點，是我正在作的小程序項目中我作的一些小實例的源碼，總結下來了三個很是經常使用的，

喜歡或者對你有幫助的話歡迎copy和學習，

另外這個項目最近在github上持續更新，歡迎star和在博客中留下你的建議。想要什麼特效在下面留言博主也會盡力知足各位客官.

最後祝你們國慶節快樂(#^.^#)