Wechat applet introduction record

Applet development documentation , Common components ...

A process of self-study , Write it down for later review

 

wxml Code ：

<!--index.wxml-->
<!-- ------------------------view  View container ----------------------- -->
<!-- 
  hover-class: Click transform properties  
  hover-stop-propagation: Stop the bubbling of the parent section 
  hover-start-time: After clicking , How long does it take to have an effect 
  hover-stay-time: After clicking , How long does the effect stay 
-->
<!-- <view hover-class='vv_press'>
  <view hover-class='v_press' hover-stop-propagation='true' hover-start-time='3000' hover-stay-time='3000'>
    hello david
  </view>
</view> -->

<!-- ------------------------scroll-view  It can slide up and down from left to right ----------------------- -->
<!--
  display:inline-block  :  No line breaks , Change to row level elements , But because the screen is small, it will automatically go to the next line 
  white-space:nowrap   take 4 Elements on a line , It won't wrap lines because the screen is small 
  scroll-x='true'   Elements that cannot be displayed , It can slide left and right 
  scroll-y='true'  You can slide the display up and down 
-->
<!-- <scroll-view style='white-space:nowrap' scroll-x='true'>
  <view style='background:red;width:400rpx;height:200rpx;display:inline-block;' ></view>
  <view style='background:blue;width:400rpx;height:200rpx;display:inline-block;' ></view>
  <view style='background:yellow;width:400rpx;height:200rpx;display:inline-block;' ></view>
  <view style='background:green;width:400rpx;height:200rpx;display:inline-block;' ></view>
</scroll-view>

<scroll-view style='height:300rpx;' scroll-y='true'>
  <view style='background:red;width:400rpx;height:200rpx;display:inline-block;' ></view>
  <view style='background:blue;width:400rpx;height:200rpx;display:inline-block;' ></view>
  <view style='background:yellow;width:400rpx;height:200rpx;display:inline-block;' ></view>
  <view style='background:green;width:400rpx;height:200rpx;display:inline-block;' ></view>
</scroll-view> -->

<!-- ------------------------swiper  Shuffling figure ----------------------- -->
<!-- 
  autoplay='true'  Turn on auto carousel 
  indicator-dots='true'  Show dots 
  interval='1000'   Time interval between 
  duration='2000'   How fast does the picture slide 
-->
<!-- <swiper autoplay='true' indicator-dots='true' interval='1000' duration='2000'>
  <block wx:for="{
   {imgUrls}}">
    <swiper-item>
      <image src="{
   {item}}"></image>
    </swiper-item>
  </block>
</swiper> -->

<!-- ------------------------movable-view  Movable elements ----------------------- -->
<!-- 
  direction='all'   Elements can be moved freely 
  direction='vertical'   Move vertically up and down 
  direction='horizontal'   Horizontal left-right movement 
  direction='none'   nothing 
-->
<!-- <movable-area style='width:400rpx;height:300rpx;background:green'>
  <movable-view style='width:100rpx;height:100rpx;background:red' direction='all'></movable-view>
</movable-area> -->

<!-- ------------------------cover-view  player ----------------------- -->
<!-- <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
  controls="{
   {false}}" event-model="bubble">
  <cover-view class="controls">
    <cover-view class="play" bindtap="play">
      <cover-image class="img" src="/path/to/icon_play" />
    </cover-view>
    <cover-view class="pause" bindtap="pause">
      <cover-image class="img" src="/path/to/icon_pause" />
    </cover-view>
    <cover-view class="time">00:00</cover-view>
  </cover-view>
</video> -->

<!-- ------------------------icon Exhibition ----------------------- -->
<!-- <view>
  <icon type='success' size='50rpx' color='red'></icon>
  <icon type='success' size='50rpx'></icon>
  <icon type='success_no_circle' size='50rpx'></icon>
  <icon type='info' size='50rpx'></icon>
  <icon type='warn' size='50rpx'></icon>
  <icon type='waiting' size='50rpx'></icon>
  <icon type='cancel' size='50rpx'></icon>
  <icon type='download' size='50rpx'></icon>
  <icon type='search' size='50rpx'></icon>
  <icon type='clear' size='50rpx'></icon>
</view> -->

<!-- ------------------------text Text ----------------------- -->
<!-- 
  selectable: Is text optional 
  nodes: Rich text      <p class="p1" style="color:red">
  progress  Progress bar 
  percent="80"  percentage 0~100
  show-info='true'  Show percentage to the right of progress bar 
  active  Left to right animation of progress bar 
  color  Progress bar color  （ Please use  activeColor）
-->
<!-- <view>
  <text selectable='true'> helloworld</text>
</view>
<view>
  <rich-text nodes='<h1>hello</h1>'></rich-text>
  <rich-text nodes='<p class="p1" style="color:red">hello1234 </p>'></rich-text>
  <rich-text nodes="{
   {nodes}}"></rich-text>
</view>
<view>
  <progress percent="80" show-info='true' active color='red'></progress>
</view> -->

<!-- ------------------------button Button ----------------------- -->
<!-- 
  size  Size of button 
  plain  Whether the button is hollow , Transparent background color 
  disabled  Whether to disable 
  loading  With or without name  loading  Icon 
-->
<!-- <view>
  <button type='default' size='mini'>default</button>
  <button type='warn'>warn</button>
  <button type='warn' plain='true'>warn</button>
  <button type='primary'>default</button>
  <button type='primary' loading='true'>default</button>
  <button type='primary' disabled='true'>default</button>
</view> -->
<!-- 
  checked :  Selected by default 
  disabled ：  Whether to disable 
-->
<!-- <view>
  <checkbox value='1'> Beijing </checkbox>
  <checkbox value='2' checked='true' disabled="true"> Shanghai </checkbox>
  <checkbox value='3'> Guangzhou </checkbox>
  <checkbox value='4'> Shenzhou </checkbox>
</view> -->
<!-- 
  border:1rpx solid red; 1rpx Red border of pixels 
  password:  Enter hide 
  maxlength:  Maximum length 
  placeholder：  The name in the default box 
-->
<!-- <view>
   account number ：
  <input type="text" style='border:1rpx solid red' placeholder=' user name '></input>
   password ：
  <input type="password" maxlength='6' style='border:1rpx solid red'></input>
</view> -->

<!-- ------------------------picker Selectors  ----------------------- -->
<!-- 
  selector :  General selector   Array
  multiSelector:  Multi column selector   A two-dimensional Array [["a","b"], ["c","d"]]
  time： Time 
  date： date 
  region： Provinces and cities 
-->
<!-- <view>
  <picker mode="selector" value='1' range='{
   {range}}'>
     Please choose a country 
  </picker>
  <picker mode="multiSelector" value='1' range='{
   {range_more}}'>
     Please select letter 
  </picker>
  <picker mode="time" value='' start='00:00' end="24:00">
     Please select a time 
  </picker>
  <picker mode="date" value='' start='2000-01-01' end='2020-01-01'>
     Please select a date 
  </picker>
  <picker mode="region">
     Please select a city 
  </picker>
</view> -->

<!-- ------------------------radio-group  Radio buttons  ----------------------- -->
<!-- 
  checked='true':  Selected by default 
  color='red'  Selected color 
  disabled='true'  Default forbidden point 
-->
<!-- <view>
  <radio-group>
    <radio value='1' checked='true'> Beijing </radio>
    <radio value='2' color='red'> Shanghai </radio>
    <radio value='3' disabled='true'> Guangzhou </radio>
  </radio-group>
</view> -->

<!-- ------------------------slider  Slide selector  ----------------------- -->
<!-- 
  step:10  10 grid 10 Lattice drag 
  show-value  The progress value is displayed on the right of the bar 
  color  line color 
-->
<!-- <view>
  <slider max='200' step='10' show-value='true' color='red'></slider>
</view> -->
<!-- ------------------------switch  Switching Selector  ----------------------- -->
<!-- <view>
  <switch checked='true' color='red'> yes </switch>
</view> -->
<!-- ------------------------textarea  Multi-line input box  ----------------------- -->
<!-- <view>
  <textarea style='border:1rpx solid gray'></textarea>
</view> -->

<!-- ------------------------form Form submission  ----------------------- -->
<!-- <form bindsubmit='submit'>
   account number ：
  <input type='text' name='username' style='border:1rpx solid red'></input>
   password ：
  <input type='password' name='password' style='border:1rpx solid red'></input>
  <button type='primary' form-type='submit'> Submit </button>
</form> -->

<!-- ------------------------navigator Page link  ----------------------- -->
<!-- 
  open-type='redirect'：  There is no return key after jump 
-->
<!-- <view>
  <navigator url='../logs/logs'> Point me to jump </navigator>
  <navigator url='../logs/logs' open-type='redirect'> Point me to jump </navigator>
</view> -->

<!-- ------------------------audio  Audio components  ----------------------- -->
<!-- 
  loop:  Loop Playback 
-->
<!-- <audio poster="http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000" name=" At the moment " author=" Xu Wei " src="http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46" id="myAudio" controls loop></audio> -->

<!-- ------------------------image  Audio components  ----------------------- -->
<!-- <image src='../image/1.jpg' style='width:100%;' mode='center'></image> -->

<!-- ------------------------video  Video components  ----------------------- -->
<!-- <video src='http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400' style='width:100%'></video> -->

<!-- ------------------------ camera System camera  ----------------------- -->
<!-- 
device-position: Before or after , The value is front, back
-->
<!-- <camera device-position='front'></camera> -->

<!-- ------------------------ map Map  ----------------------- -->
<!-- <map longitude="113.324520" latitude="23.099994" scale="14" show-location style="width: 100%; height: 300px;"></map> -->

<!-- <view> hello world</view>
<view> {
   {username}}</view>
<view> {
   {json.age}}</view>
<view> {
   {arr[0]}}</view>
<view style='height:2000rpx;width:300rpx;background:red;'></view> -->

<!--  Reference template  -->
<!-- <import src='../template/template.wxml' />
<template is='tem' date='{
   {...json}}'/> -->

<view>{
   {list[ind]}}</view>  
<button bindtap='sub' type='primary'> Submit </button>
<button bindtap='save' type='primary'> preservation </button>
<button bindtap='getBy' type='primary'> obtain </button>
<button bindtap='del' type='primary'> Delete </button>
<view>{
   {username}}</view>
<button bindtap='getloc' type='primary'> To obtain position </button>
<button bindtap='getinfo' type='primary'> Get the device </button>
<button bindtap='call' type='primary'> Make a phone call </button>
<button bindtap='code' type='primary'> Sweep code </button>
<button bindtap='upimg' type='primary'> To upload pictures </button>
<!--  The preview image  -->
 <!-- <image src='https://cires.gydhp.com/20180418/5ad71cca867b5.png' data-src='https://cires.gydhp.com/20180418/5ad71cca867b5.png' bindtap='preimg' ></image> -->
<button bindtap='getimg' type='primary'> Get picture information </button>
<!--  Save pictures to your local album  -->
<button bindtap='savelocal' type='primary'> Get pictures and save them locally </button>
<!-- <image src='{
   {imgsrc}}'></image> -->
<button bindtap='getUserInfo' type='primary'> Get background data </button>
<button bindtap='saveInter' type='primary'> Upload pictures to the server </button>
<button bindtap='linksocket' type='primary'>socket Connect </button>
<button bindtap='getLogin' type='primary'> Sign in </button>
<button bindtap='getLoginStatus' type='primary'> Login status verification </button>
<button bindtap='getpay' type='primary'> payment </button>

<!--  Top fixed  -->
<view class="page__hd" style="position:fixed; top:0;width: 750rpx;">
    ......
</view>
<!--  Bottom fixed  -->
<view class="page__hd" style="position:fixed; bottom:0;width: 750rpx;">
    ......     
</view>
<!--  Customer service reply  -->
<button class='contact-btn' open-type='contact'> Go to the customer service to reply “1”</button>

js Code ：

//index.js
// Get application instance 
const app = getApp()

// Page({
//   data: {
//     imgUrls: [
//       '../image/1.jpg',
//       '../image/2.jpg',
//       '../image/3.jpg',
//     ],
//     nodes: [{
//       "name": "p",
//       "attrs": {
//         "class": "p1",
//         "style": "color:red"
//       },
//       "children": [{
//         "type": "text",
//         "text": "hello1234"
//       }]
//     }],
//     range: [" China ", " The United States ", " Russian ", " South Korea "],
//     range_more: [
//       ["a", "b"],
//       ["c", "d"]
//     ]
//   },
//    player js Start ----->>>>>>>>>>>
//   onReady() {
//     this.videoCtx = wx.createVideoContext('myVideo')
//   },
//   play() {
//     this.videoCtx.play()
//   },
//   pause() {
//     this.videoCtx.pause()
//   },
//    player js end ------------------<<<<<<<<<<

//   submit: function(res) {
//     console.log("submit:", res.detail.value)
//   }
// })

Page({

  /**
   *  Initial data of the page 
   */
  data: {
    username: " De Marcia ",
    json: {
      "a": {
        "age": 20
      },
      "b": {
        "name": " China "
      }
    },
    arr: [' Beijing ', ' Shanghai '],
    ind: '',
    list: [' Beijing ', ' Shanghai ', ' Guangzhou ', ' Shenzhen '],
    username: '',
    imgsrc: '',

  },

  /**
   *  Life cycle function -- Monitor page loading  >>> Execution order ：1
   */
  onLoad: function(options) {
    console.log("index onLoad")
  },

  /**
   *  Life cycle function -- Listening page first rendering completed  >>> Execution order ：3
   */
  onReady: function() {
    console.log("index onReady")
  },

  /**
   *  Life cycle function -- Monitor page display  >>> Execution order ：2
   */
  onShow: function() {
    console.log("index onShow")
  },

  /**
   *  Life cycle function -- Monitor page hidden , The background is not destroyed 
   */
  onHide: function() {
    console.log("index onHide")
  },

  /**
   *  Life cycle function -- Monitor page uninstall , The backstage has been destroyed 
   */
  onUnload: function() {
    console.log("index onUnload")
  },

  /**
   *  Page related event handler -- Monitor user pull-down action 
   */
  onPullDownRefresh: function() {
    console.log("index onPullDownRefresh")
  },

  /**
   *  Handling function of page pull bottom event 
   */
  onReachBottom: function() {
    console.log("index onReachBottom")
  },

  /**
   *  Users click the upper right corner to share 
   */
  onShareAppMessage: function() {
    console.log("index onShareAppMessage")
    return {
      "title": " name "
    }
  },

  /**
   *  Sliding page Events 
   */
  onPageScroll: function() {
    console.log("index onPageScroll");
  },

  /**
   *  A pop-up alert 
   * title  Text shows at most  7  Length of Chinese characters 
   * icon:  Icon ,success,loading,none
   * duration：  Display dwell time , Default 1500
   * 
   */
  sub: function() {

    // Bullet box prompt 
    // wx.showToast({
    //   title: ' success ',
    //   icon:'none',
    //   duration: 8000
    // })
    // // Hide the time shown in the box above within the specified time 
    // setTimeout(function(){
    //   wx.hideToast();
    // },1000)

    // // Always show loading 
    // wx.showLoading({
    //   title: ' Loading ',
    // })
    // // Cancel the display within the specified time 
    // setTimeout(function(){
    //   wx.hideLoading();
    // },1000)

    // // Bullet box prompt   There's a OK cancel button 
    // wx.showModal({
    //   title: ' Tips ',
    //   content: ' Are you sure to register ',
    //   showCancel: false, // Whether to display the Cancel button 
    //   cancelText: "No", // Change the text of the Cancel button , most 4 A word 
    //   confirmText: "Yes", // Change the text of the confirm button , most 4 A word 
    //   success(res) {
    //     if (res.confirm) {
    //       console.log(" determine ")
    //     } else {
    //       console.log(" Cancel ")
    //     }
    //   },
    // })

    // // Pop box at the bottom , And print out the value to the page 
    // var that = this;
    // wx.showActionSheet({
    //   itemList: [' Beijing ', ' Shanghai ', ' Guangzhou ', ' Shenzhen '],
    //   success(res) {
    //     console.log(res);
    //     that.setData({
    //       ind: res.tapIndex
    //     })
    //   }
    // })

    // // After clicking submit, the title has a loading Icon 
    // wx.showNavigationBarLoading();// Show 
    // wx.hideNavigationBarLoading();// hide 

    // // Page Jump ,==  Jump to a new page , You can also return to the previous page , There's a back button 
    // wx.navigateTo({
    //   url: '../logs/logs',
    // })

    // // Page Jump ,== Open a new page , The original page is destroyed , No return button 
    // wx.redirectTo({
    //   url: '../logs/logs',
    // })



  },

  /**
   *  Store in local cache 
   */
  save: function() {
    // Asynchronous storage 
    wx.setStorage({
      key: 'username',
      data: ' Deng Chao ',
    })
    // Synchronous storage 
    wx.setStorageSync('name', ' Chen He ')
  },

  /**
   *  Get the data in the cache 
   */
  getBy: function() {
    var that = this;
    wx.getStorage({
      key: 'username',
      success: function(res) {
        console.log(res)
        that.setData({
          username: res.data
        })
      },
    })
    this.setData({
      username: wx.getStorageSync("age")
    })
  },

  /**
   *  Delete the value in the cache 
   */
  del: function() {
    // Delete asynchronously 
    wx.removeStorage({
      key: 'user',
      success: function(res) {
        console.log(res)
      },
    })
    // Sync delete 
    wx.removeStorageSync("age")
    // Clean up the local cache asynchronously 
    // wx.clearStorage()
    // Synchronously clear the local cache 
    wx.clearStorageSync()
  },

  /**
   *  To obtain position 
   */
  getloc: function() {
    wx.getLocation({
      type: 'gcj02', //wgs84  return  gps  coordinate ,gcj02  Return can be used for  wx.openLocation  Coordinates of 
      altitude: true,
      success: function(res) {
        console.log(res)
        var latitude = res.latitude;
        var longitude = res.longitude;
        var speed = res.speed;
        var accuracy = res.accuracy;
        wx.openLocation({
          latitude: latitude,
          longitude: longitude,
          scale: 28
        })
      },
    })
  },

  /**
   *  Get the device 
   */
  getinfo: function() {
    wx.getSystemInfo({
      success: function(res) {
        console.log(res)
      },
      fail: function(res) {},
      complete: function(res) {},
    })
    // Get the network connection method 
    wx.getNetworkType({
      success: function(res) {
        console.log(res)
      },
    })
  },
  /**
   *  Make a phone call 
   */
  call: function() {
    wx.makePhoneCall({
      phoneNumber: '17600116461',
    })
  },
  /**
   *  Sweep code 
   */
  code: function() {
    wx.scanCode({
      success: function(res) {
        console.log(res)
      }
    })
  },
  /**
   *  To upload pictures 
   */
  upimg: function() {
    wx.chooseImage({
      count: 1, // The maximum number of pictures you can choose , Default 9
      sourceType: ['album', 'camera'], // Choose the source of the picture :album Select pictures from album ,camera Using the camera 
      success: function(res) {
        console.log(res)
      },
    })
  },
  /**
   *  The preview image 
   */
  preimg: function(res) {
    console.log(res)
    var imgsrc = res.target.dataset.src;
    wx.previewImage({
      urls: [imgsrc],
    })
  },
  /**
   *  Get picture information 
   */
  getimg: function(res) {
    wx.getImageInfo({
      src: 'https://cires.gydhp.com/20180418/5ad724a22cd73.png',
      success: function(res) {
        console.log(res)
      }
    })
  },
  /**
   *  Get pictures and save them locally 
   */
  savelocal: function(res) {
    var that = this;
    wx.chooseImage({
      success: function(res) {
        console.log(res)
        var temp = res.tempFilePaths[0];
        console.log(temp)
        wx.saveFile({
          tempFilePath: 'temp',
          success: function(res) {
            console.log("11111111" + res)
            that.setData({
              imgsrc: tempFilePath
            })
          }
        })
      },
    })
  },
  /**
   * get request demo,post request demo
   */
  getUserInfo: function() {
    //get request 
    // wx.request({
    //   url: 'http://192.168.1.39',
    //   method: 'GET',
    //   success: function(res) {
    //     console.log(res)
    //   }
    // })
    //post request 
    wx.request({
      url: 'http://192.168.1.39',
      // data: 'username=dengchao&age=30',
      data: {
        "username": "dengchao",
        "age": 30
      },
      header: {
        "content-type": "application/x-www-form-urlencoded"
      },
      method: 'post',
      dataType: 'json',
      responseType: 'text',
      success: function(res) {
        console.log(res)
      },
      fail: function(res) {},
      complete: function(res) {},
    })
  },
  /**
   *  Customer service dialogue 、 Chat 
   * ws==http
   * wss==https
   */
  linksocket: function() {
    wx.connectSocket({
      url: 'ws://192.168.1.39:8888',
      success: function(res) {
        console.log(res)
      }
    })
    // monitor  WebSocket  Connection open event 
    wx.onSocketOpen(function() {
      console.log("success")
    })
    // monitor  WebSocket  Receive message event from server 
    wx.onSocketMessage(function(res) {
      console.log(res)
    })
  },

  /**
   *  obtain openid
   */
  getLogin: function(res) {
    // obtain code
    wx.login({
      success: function(res) {
        console.log(res)
        if (res.code) {
          wx.request({
            url: 'https://test.com/onLogin',
            data: {
              code: res.code
            },
            success: function(res) {
              // obtain token
              console.log(res)
            }
          })
        } else {
          console.log(" Login failed ")
        }
      }
    })
  },
  getLoginStatus: function(res) {
    wx.checkSession({
      success: function(res) {
        // No failure 

      },
      // The login status is invalid and needs to be called again wx.login Method 
      fail: function(res) {
        wx.login({
          success: function(res) {
            console.log(res)
            if (res.code) {
              wx.request({
                url: 'https://test.com/onLogin',
                data: {
                  code: res.code
                },
                success: function(res) {
                  // obtain token
                  console.log(res)
                }
              })
            } else {
              console.log(" Login failed ")
            }
          }
        })
      }
    })
  },
  /**
   *  payment 
   */
  getpay: function() {
    wx.requestPayment({
      timeStamp: '',
      nonceStr: '',
      package: '',
      signType: '',
      paySign: '',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  }

})

css Code ：

/**index.wxss**/
.v_press{
  background: red;
  width: 200rpx;
  height: 200rpx;

}
.vv_press{
  background: green;
  width: 400rpx;
  height: 400rpx;
}

/*  player css */
.controls {
  position: relative;
  top: 50%;
  height: 50px;
  margin-top: -25px;
  display: flex;
}
.play,
.pause,
.time {
  flex: 1;
  height: 100%;
}
.time {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  line-height: 50px;
}
.img {
  width: 40px;
  height: 40px;
  margin: 5px auto;
}
/*  player css end  */

/* Border settings properties */
.border{
  border: 2rpx solid #7F99CC; // Set border width , Border color 
  box-shadow:0 0 20rpx #7F99CC; // Set the outside shadow width , Shadow color 
}

/* Customer service box settings properties */
.contact-btn {
  border-radius: 2rpx;
  font-size: 30rpx;
  color: #fff;
  text-align: center;
  line-height: 70rpx;
  background: #bd10e0;
  width: 522rpx;
  height: 70rpx;
  margin-left: 116rpx;
}

.{
  text-align: center;   /**  Horizontal center  **/
  line-height: 350rpx;  /**  Vertical center  **/
  border-top: 1rpx solid #e8e8e8;
  border-radius: 20rpx; // Fillet settings 
  border-top-left-radius:0rpx;
  border-top-right-radius:0rpx;
  border-bottom-left-radius:10rpx;
  border-bottom-right-radius:10rpx;
  
  float: right;// be at the right 
  margin-right:26rpx;// Bearing on the (float: right)

  //  The top inner margin is  10px, The right inner margin is  5px, The bottom inner margin is  15px, The left inner margin is  20px
  padding:10px 5px 15px 20px;  

transform: rotate(45deg);// Rotation Angle 
}

json Code ：

{
  "enablePullDownRefresh": true
}