寫在前面
最近在負責一個微信小程序的前端以及前後端接口的對接的項目,整體上所有頁面的布局我都已經搭建完成,裏面有一些常用的特效,總結一下,希望對大家和我都能有所幫助
實例1:滾動tab選項卡
先看一下效果圖吧,能夠點擊菜單或滑動頁面切換,tab菜單部分可以實現左右滾動
好了,看一下我的源碼吧!<喜歡的話拿走不謝喲>
1、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
2、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
3、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:星級評分
按照慣例先上效果圖,默認一星,點擊可以選擇星級,可半星顯示。
1、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
2、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
3、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 =http://www.cnblogs.com/okaychen/p/ 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:自定義底部彈出層
自定義底部彈出層,在電商的小程序中經常會用到,根據需要自定義彈出內容,先看下我的效果
我已經把我自定義的部分抽離了出來
1、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
2、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
3、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和在博客中留下你的建議。想要什麽特效在下面留言博主也會盡力滿足各位客官.
最後祝大家國慶節快樂(#^.^#)
Tags: quot 039 view data-current currentTab swichNav
文章來源: