做網站,我們是認真的!

網站適配電腦+手機端,僅1280元,送2000M阿里云服務器,送com域名+免費備案
網站前端采用靜態系統顯示,后端動態管理,我們承諾網站包收錄,完成網站之后把源碼給客戶!

觀點

互聯網+時代,說建站,談運營與網絡營銷

微信小程序開發小技巧

時間:2021-06-04

1、輪播組件

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item.photo}}" class="slide-image" width="100%" height="200"  />
      </swiper-item>
    </block>
  </swiper>


2、用if標簽控制內容的輸出顯示

<view class="gmxx" style="font-size:28rpx;width:30%">
    <text wx:if="item.is_show==1">新品</text>
    <text wx:elif="item.is_hot==1">熱銷</text>
    <text wx:else>推薦</text>
</view>


3、組件彈性布局,常用于一行有多個<view>時,平均分配寬度

 <view style="display:flex; flex-direction:row;  justify-content:space-around;  margin:0rpx; line-height:50rpx; color:#999">
     <view class=""  style="font-size:28rpx; padding-right:70rpx; margin:0rpx;">
            <text>新品55</text>
     </view>
     <view class="" style="font-size:28rpx;">銷量555:{{item.shiyong}}</view>
 </view>


4、打印輸出調試信息

console.log('23432')

5、圖片、組建透明度設置

div
{
    opacity:0.5;
}
//圖片透明度
<image style="opacity:0.5" src="1.png"></image>
// opacity :規定不透明度。從 0.0 (完全透明)到 1.0(完全不透明)

6、彈出提示框

selectByItemName: function () {
    var that = this;
    if (!that.data.inputKey) {
      wx.showToast({
        title: '請輸入關鍵字',
        icon:'loading',
        duration:2000,
      })
      return ;
    }
// 隱藏消息提示框:

wx.showToast({
  title: '加載中' ,
  icon: 'loading' ,
  duration: 10000
})
 // 2s 后關閉提示框
setTimeout( function (){
  wx.hideToast()
},2000)


7、輪播圖中圖片綁定點擊事件

//多個輪播圖綁定同一事件,通過id或index值區分
1) bindtap="itemClick" id="{{index}}" 綁定的函數實現:
itemClick: function (event) {
    console.log(event)
    var index = event.target.id
   },
2)wx:bindtap="itemClick" data-index="{{index}}" 綁定的函數實現方式:

itemClick: function (event) {
  console.log(event)
  var index =  event.target.dataset.index
},


8、顯示模態對話框

wx.showModal({
 title: '提示',
 content: '這是一個模態彈窗',
 success: function(res) {
  if (res.confirm) {
   console.log('用戶點擊確定')
  }
 }
})


(持續更新中.....)
0
首頁
案例
關于
聯系
凯时平台