一、首先我先介绍一下，我们要做一个什么样的项目功能

  1.    项目功能就是一个音频点击播放，当点击为播放的状态时，一个音频的动图出现，而且是可以跟随着手指的滑动而滑动，而且，在滑动动图的时候，当前下的页面是不可以跟随着我的滑动而上下滚动，当停止滑动的时候，音频动图停靠在手机的左侧或者右侧，而当前下的页面是可以上下滚动的，功能介绍到此为止，下面我们说一下思路。

二、我们做这个功能，第二步就是要想思路

  1. 思路就是，利用微信中的滑动事件，外加控制css样式，来完成这个功能。

三、这是项目的ui图，废话不多说，直接撸代码。

  1. 项目样图



四、index.wxml、index.wxss、index.js页面代码

  1. *index.wxml页面*
  1. <!-- 搜索 -->
  3.     <view class='home_srh'>
  4.         <view class='srh_box' bindtap='srhBox'>
  5.             <image class='srh_box_img' src='../../img/home_search.png'></image>
  6.             <view class='srh_box_text'>开心奶奶</view>
  7.         </view>
  8.     </view>
  10.     <!-- 音频分类 -->
  12.     <view class='home_ban'>
  14.         <!-- 轮播图 -->
  15.         <view class="page-section">
  16.         <swiper circular="true" previous-margin="44rpx" next-margin="44rpx">
  17.             <!-- <block wx:for="{{}}" wx:key=""> -->
  18.             <swiper-item>
  19.                 <view class="swiper-item">
  20.                     <audio src="http://img.tukuppt.com/preview_music/00/00/60/yulan-5b87c00c59d402663.mp3" id="myAudio" loop></audio>
  21.                     <view class='audio_box'>
  22.                         <button bindtap='audioPlay' wx:if="{{adply1}}" class='audio_play'>
  23.                             <image  src='../../img/home_adplay.png' ></image>
  24.                         </button>
  25.                         <button bindtap='audioPause' wx:if="{{adply2}}" class='audio_play'>
  26.                             <image  src='../../img/home_adstop.png' ></image>
  27.                         </button>
  28.                     </view>
  29.                     <view class='audio_next'>
  30.                         <image src='../../img/audio_next.png'></image>
  31.                     </view>
  32.                     <view class='audio_collect'>
  33.                         <button bindtap='audioColy' wx:if="{{adcol1}}" class='audio_coly'>
  34.                             <image src='../../img/audio_nocollect.png'></image>
  35.                         </button>
  36.                         <button bindtap='audioColn' wx:if="{{adcol2}}" class='audio_coly'>
  37.                             <image src='../../img/audio_collect.png'></image>
  38.                         </button>
  39.                     </view>
  40.                     <view class='audio_text'>开心奶奶——小小探险家</view>
  41.                 </view>
  42.             </swiper-item>
  43.             <swiper-item>
  44.                 <view class="swiper-item">
  45.                     <audio src="http://img.tukuppt.com/preview_music/00/00/60/yulan-5b87c00c59d402663.mp3" id="myAudio" loop></audio>
  46.                     <view class='audio_box'>
  47.                         <button bindtap='audioPlay' wx:if="{{adply1}}" class='audio_play'>
  48.                             <image  src='../../img/home_adplay.png' ></image>
  49.                         </button>
  50.                         <button bindtap='audioPause' wx:if="{{adply2}}" class='audio_play'>
  51.                             <image  src='../../img/home_adstop.png' ></image>
  52.                         </button>
  53.                     </view>
  54.                     <view class='audio_next'>
  55.                         <image src='../../img/audio_next.png'></image>
  56.                     </view>
  57.                     <view class='audio_collect'>
  58.                         <button bindtap='audioColy' wx:if="{{adcol1}}" class='audio_coly'>
  59.                             <image src='../../img/audio_nocollect.png'></image>
  60.                         </button>
  61.                         <button bindtap='audioColn' wx:if="{{adcol2}}" class='audio_coly'>
  62.                             <image src='../../img/audio_collect.png'></image>
  63.                         </button>
  64.                     </view>
  65.                     <view class='audio_text'>开心奶奶——小小探险家</view>
  66.                 </view>
  67.             </swiper-item>
  68.             <!-- </block> -->
  69.             </swiper>
  71.         </view>
  73. ----------
  75. > 重点！！！！
  77.         <!-- 音频动图 -->
  78.         <view class='{{ home_back }}' catchtouchmove='true' >
  79.             <view class='audio_fre'  wx:if="{{ adFre }}" bindtouchmove="handletouchmove" bindtouchend="handletouchend" style = "top:{{top}}px; left: {{left}}px; right: {{right}}px">
  80.                 <image class='audio_fre1' src='../../img/audio_back.png'></image>
  81.                 <image class='audio_fre2' src='../../img/audio_fre.gif'></image>
  82.             </view>
  83.         </view>
  85. ----------
  87.         <!-- 分类 -->
  88.         <view class='menu_ul'>
  89.             <view class='menu_li' id="0" bindtap='menuLi'>
  90.                 <image src='../../img/recom.png'></image>
  91.                 <view class='menu_text'>推荐故事</view>
  92.             </view>
  93.             <view class='menu_li' id="1" bindtap='menuLi'>
  94.                 <image src='../../img/boy_icon.png'></image>
  95.                 <view class='menu_text'>男孩</view>
  96.             </view>
  97.             <view class='menu_li' id="2" bindtap='menuLi'>
  98.                 <image src='../../img/girl_icon.png'></image>
  99.                 <view class='menu_text'>女孩</view>
  100.             </view>
  101.         </view>
  103.     </view>
  105.     <!-- 儿童故事 -->
  106.     <view class='child_story'>
  107.         <view class='story_ul' wx:if="{{curr_index == 0}}">
  108.             <view class='story_li' bindtap='storySec'>
  109.                 <view class='story_li_img'>
  110.                     <image class='story_li_img1' src='../../img/weekend-first.png'></image>
  111.                     <image class='story_li_img2' src='../../img/pay_icon.png'></image>
  112.                 </view>
  113.                 <view class='st_li_tit b'>童话故事里的小智慧</view>
  114.                 <view class='st_li_sec'>小智慧，大智慧</view>
  115.             </view>
  116.         </view>
  117.         <view class='story_ul' wx:if="{{curr_index == 1}}">
  118.             <view class='story_li' bindtap='storySec'>
  119.                 <view class='story_li_img'>
  120.                     <image class='story_li_img1' src='../../img/weekend-first.png'></image>
  121.                     <!-- <image class='story_li_img2' src='../../img/pay_icon.png'></image> -->
  122.                 </view>
  123.                 <view class='st_li_tit b'>童话故事里的小智慧</view>
  124.                 <view class='st_li_sec'>小智慧，大智慧</view>
  125.             </view>
  126.         </view>
  127.         <view class='story_ul' wx:if="{{curr_index == 2}}">
  128.             <view class='story_li' bindtap='storySec'>
  129.                 <view class='story_li_img'>
  130.                     <image class='story_li_img1' src='../../img/weekend-first.png'></image>
  131.                     <image class='story_li_img2' src='../../img/pay_icon.png'></image>
  132.                 </view>
  133.                 <view class='st_li_tit b'>童话故事里的小智慧</view>
  134.                 <view class='st_li_sec'>小智慧，大智慧</view>
  135.             </view>
  136.         </view>
  137.     </view>
  1. *index.wxss样式*
  1. /**index.wxss**/
  3. .home_back1{
  4.     width: 100%;
  5. }
  7. .home_back2{
  8.     position: fixed;
  9.     top: 0;
  10.     left: 0;
  11.     right: 0;
  12.     bottom: 0;
  13.     z-index: 10;
  14. }
  16. /* 搜索 */
  17. .home_srh {
  18.     width: 100%;
  19.     height: 74rpx;
  20.     padding-top: 20rpx;
  21.     background: #fff;
  22.     border-bottom: 1rpx solid #e8e8e8;
  23. }
  25. .home_srh .srh_box {
  26.     width: 690rpx;
  27.     height: 54rpx;
  28.     margin: 0 auto;
  29.     box-shadow: 0 0 10rpx 2rpx #f1f1f1;
  30.     border-radius: 50rpx;
  31.     display: flex;
  32.     align-items: center;
  33. }
  35. .home_srh .srh_box .srh_box_img {
  36.     width: 24rpx;
  37.     height: 26rpx;
  38.     display: inline-block;
  39.     margin-left: 32rpx;
  40.     margin-right: 20rpx;
  41. }
  43. .home_srh .srh_box .srh_box_text {
  44.     font-size: 24rpx;
  45.     color: #999;
  46. }
  48. /* 音频分类 */
  50. /* banner图 */
  51. .home_ban{
  52.     width: 100%;
  53.     height: 422rpx;
  54.     background: #fff;
  55.     padding-top: 18rpx;
  56. }
  58. .home_ban .page-section{
  59.     width: 100%;
  60.     height: 258rpx;
  61.     position:relative;
  62.     z-index: 2;
  63. }
  65. .home_ban .page-section .swiper-item{
  66.     width: 630rpx;
  67.     height: 258rpx;
  68.     margin: 0 auto;
  69.     position: relative;
  70.     display: block;
  71. }
  73. .home_ban .page-section .swiper-item audio{
  74.     width: 630rpx;
  75.     height: 258rpx;
  76.     display: block;
  77.     background: #ccc;
  79. }
  81. .home_ban .page-section .swiper-item .audio_box {
  82.     width: 90rpx;
  83.     height: 90rpx;
  84.     position: absolute;
  85.     left: 50%;
  86.     top: 50%;
  87.     margin-left: -45rpx;
  88.     margin-top: -45rpx;
  89. }
  91. .home_ban .page-section .swiper-item .audio_box .audio_play {
  92.     width: 90rpx;
  93.     height: 90rpx;
  94.     display: block;
  95.     background: rgba(0,0,0,0);
  96. }
  98. .home_ban .page-section .swiper-item .audio_box .audio_play image{
  99.     width: 90rpx;
  100.     height: 90rpx;
  101.     display: block;
  102. }
  104. .home_ban .page-section .swiper-item .audio_next {
  105.     width: 60rpx;
  106.     height: 60rpx;
  107.     position: absolute;
  108.     top: 50%;
  109.     margin-top: -30rpx;
  110.     right: 169rpx;
  111. }
  113. .home_ban .page-section .swiper-item .audio_next image {
  114.     width: 60rpx;
  115.     height: 60rpx;
  116.     display: block;
  117. }
  119. .home_ban .page-section .swiper-item .audio_collect {
  120.     width: 60rpx;
  121.     height: 60rpx;
  122.     position: absolute;
  123.     top: 50%;
  124.     margin-top: -30rpx;
  125.     right: 169rpx;
  126. }
  128. .home_ban .page-section .swiper-item .audio_collect image {
  129.     width: 60rpx;
  130.     height: 60rpx;
  131.     display: block;
  132. }
  134. .home_ban .page-section .swiper-item .audio_collect {
  135.     width: 60rpx;
  136.     height: 60rpx;
  137.     position: absolute;
  138.     top: 50%;
  139.     margin-top: -30rpx;
  140.     left: 169rpx;
  141. }
  143. .home_ban .page-section .swiper-item .audio_collect .audio_coly {
  144.     width: 60rpx;
  145.     height: 60rpx;
  146.     display: block;
  147.     background: rgba(0,0,0,0);
  148. }
  150. .home_ban .page-section .swiper-item .audio_collect .audio_coly image {
  151.     width: 60rpx;
  152.     height: 60rpx;
  153.     display: block;
  154. }
  156. .home_ban .page-section .swiper-item .audio_text{
  157.     width: 100%;
  158.     font-size: 28rpx;
  159.     color: #fff;
  160.     text-align: center;
  161.     position: absolute;
  162.     bottom: 26rpx;
  163. }
  165. /* 音频小白点 */
  167. .audio_fre {
  168.     width: 108rpx;
  169.     height: 108rpx;
  170.     position: fixed;
  171.     z-index: 99;
  172. }
  174. .audio_fre .audio_fre1 {
  175.     width: 104rpx;
  176.     height: 104rpx;
  177.     display: block;
  178.     border-radius: 100%;
  179.     border: 2rpx solid #fff;
  180. }
  182. .audio_fre .audio_fre2 {
  183.     width: 60rpx;
  184.     height: 60rpx;
  185.     position: absolute;
  186.     top: 50%;
  187.     margin-top: -30rpx;
  188.     left: 50%;
  189.     margin-left: -30rpx;
  190. }
  192. /* 菜单分类 */
  193. .menu_ul {
  194.     width: 100%;
  195.     height: 164rpx;
  196. }
  198. .menu_ul .menu_li {
  199.     width: 33.3%;
  200.     height: 164rpx;
  201.     float: left;
  202.     text-align: center;
  203. }
  205. .menu_ul .menu_li:nth-child(1) image{
  206.     width: 78rpx;
  207.     height: 80rpx;
  208.     display: block;
  209.     margin: 0 auto;
  210.     margin-top: 23rpx;
  211. }
  213. .menu_ul .menu_li:nth-child(2) image{
  214.     width: 74rpx;
  215.     height: 97rpx;
  216.     display: block;
  217.     margin: 0 auto;
  218.     margin-top: 8rpx;
  219. }
  221. .menu_ul .menu_li:nth-child(3) image{
  222.     width: 73rpx;
  223.     height: 96rpx;
  224.     display: block;
  225.     margin: 0 auto;
  226.     margin-top: 8rpx;
  227. }
  229. .menu_ul .menu_li .menu_text{
  230.     width: 100%;
  231.     text-align: center;
  232.     font-size: 24rpx;
  233.     color: #343434;
  234.     margin-top: 10rpx;
  235. }
  237. /* 儿童故事 */
  238. .child_story {
  239.     width: 100%;
  240.     margin-top: 8rpx;
  241.     background: #fff;
  242. } 
  244. .child_story .story_ul {
  245.     padding: 0 32rpx;
  246.     padding-top: 30rpx;
  247.     overflow: hidden;
  248. }
  250. .child_story .story_ul .story_li {
  251.     width: 330rpx;
  252.     float: left;
  253.     margin-right: 26rpx;
  254.     margin-bottom: 30rpx;
  255. }
  257. .child_story .story_ul .story_li:nth-child(2n) {
  258.     margin-right: 0;
  259. }
  261. .child_story .story_ul .story_li .story_li_img {
  262.     width: 330rpx;
  263.     height: 210rpx;
  264.     border-radius: 14rpx;
  265.     position: relative;
  266.     overflow: hidden;
  267. }
  269. .child_story .story_ul .story_li .story_li_img .story_li_img1{
  270.     width: 330rpx;
  271.     height: 210rpx;
  272.     display: block;
  273. }
  275. .child_story .story_ul .story_li .story_li_img .story_li_img2{
  276.     width: 95rpx;
  277.     height: 32rpx;
  278.     display: block;
  279.     position: absolute;
  280.     top: 0;
  281.     left: 0;
  282. }
  284. .child_story .story_ul .story_li .st_li_tit {
  285.     width: 90%;
  286.     font-size: 26rpx;
  287.     color: #212121;
  288.     margin-top: 18rpx;
  289.     padding: 0 5%;
  290.     overflow: hidden;
  291.     text-overflow: ellipsis;
  292.     white-space: nowrap;
  293.     letter-spacing: 0.4rpx;
  294. }
  296. .child_story .story_ul .story_li .st_li_sec {
  297.     width: 90%;
  298.     font-size: 18rpx;
  299.     color: #999;
  300.     margin-top: 6rpx;
  301.     padding: 0 5%;
  302.     letter-spacing: 0.2rpx;
  303. }
  1. *index.js页面*
  1. //index.js
  2. var app = getApp();
  3. Page({
  5.     /**
  6.      * 页面的初始数据
  7.      */
  8.     data: {
  9.         adply1: true,
  10.         adply2: false,
  11.         adcol1: true,
  12.         adcol2: false,
  13.         adFre: false,
  14.         funBun: false,
  15.         curr_index: 0,
  16.         screenHeight: 0,
  17.         screenWidth: 0,
  18.         top: 65,
  19.         left: 300,
  20.         right: 0,
  21.         home_back: 'home_back1'
  22.     },
  24.     /**
  25.      * 生命周期函数--监听页面加载
  26.      */
  27.     onLoad: function (options) {
  28.         //获取屏幕宽高
  29.         var that = this;
  30.         wx.getSystemInfo({
  31.             success: function (res) {
  32.                 console.log(res.windowWidth)//手机可用屏幕宽度
  33.                 console.log(res.windowHeight)//手机可用屏幕高度
  34.                 that.setData({
  35.                     screenHeight: res.windowHeight,
  36.                     screenWidth: res.windowWidth,
  37.                 });
  38.             }
  39.         });
  40.     },
  42.     /**
  43.      * 生命周期函数--监听页面初次渲染完成
  44.      */
  45.     onReady: function (e) {
  46.         let that = this;
  47.         that.audioCtx = wx.createAudioContext('myAudio')
  48.     },
  50.     /**
  51.      * 生命周期函数--监听页面显示
  52.      */
  53.     onShow: function () {
  55.     },
  57.     /**
  58.      * 生命周期函数--监听页面隐藏
  59.      */
  60.     onHide: function () {
  62.     },
  64.     /**
  65.      * 生命周期函数--监听页面卸载
  66.      */
  67.     onUnload: function () {
  69.     },
  71.     /**
  72.      * 页面相关事件处理函数--监听用户下拉动作
  73.      */
  74.     onPullDownRefresh: function () {
  76.     },
  78.     /**
  79.      * 页面上拉触底事件的处理函数
  80.      */
  81.     onReachBottom: function () {
  83.     },
  85.     /**
  86.      * 用户点击右上角分享
  87.      */
  88.     onShareAppMessage: function () {
  90.     },
  92.     /**
  93.      * 跳转搜索页面
  94.      */
  95.     srhBox: function () {
  96.         let that = this;
  97.         wx.navigateTo({
  98.             url: '../search/index',
  99.         })
  100.     },
  102.     /**
  103.      * 点击播放
  104.      */
  105.     audioPlay: function () {
  106.         var that = this;
  107.         that.audioCtx.play();
  108.         that.setData({
  109.             adply1: false,
  110.             adply2: true,
  111.             adFre: true,
  112.             // isScroll: that.data.isScroll
  113.         })
  114.     },
  116.     /**
  117.      * 点击暂停
  118.      */
  119.     audioPause: function () {
  120.         var that = this;
  121.         that.audioCtx.pause();
  122.         that.setData({
  123.             adply1: true,
  124.             adply2: false,
  125.             adFre: false,
  126.             // isScroll: that.data.isScroll
  127.         })
  128.     },  
  130.     /**
  131.     * 点击收藏
  132.     */
  133.     audioColy: function () {
  134.         var that = this;
  135.         that.setData({
  136.             adcol1: false,
  137.             adcol2: true,
  138.         })
  139.     },
  141.     /**
  142.      * 点击未收藏
  143.      */
  144.     audioColn: function () {
  145.         var that = this;
  146.         that.setData({
  147.             adcol1: true,
  148.             adcol2: false,
  149.         })
  150.     },  
  152.     /**
  153.      * 跳转故事详情
  154.      */
  156.     storySec: function () {
  157.         let that = this;
  158.         wx.navigateTo({
  159.             url: '../audio/index',
  160.         })
  161.     },
  163.     /**
  164.      * 点击切换
  165.      */
  167.     menuLi: function (e) {
  168.         let that = this;
  169.         // console.log (e);
  170.         let id = e.currentTarget.id;
  172.         that.setData({
  173.             curr_index: id
  174.         })
  175.     },
  177.     /**
  178.      * 音频小白点滑动
  179.      */
  181.     //滑动移动事件
  182.     handletouchmove: function (e) {
  183.         let that = this;
  184.         let clientX = e.touches[0].clientX;
  185.         let clientY = e.touches[0].clientY;
  186.         //屏幕边界判断
  187.         if (clientX < 20 || clientY < 20)
  188.             return;
  189.         if (clientX > that.data.screenWidth - 20)
  190.             return;
  191.         if (clientY > that.data.screenHeight - 20)
  192.             return;
  193.         that.setData({
  194.             left: e.touches[0].clientX - 20,
  195.             top: e.touches[0].clientY - 20,
  196.             right: e.touches[0].clientX - 20,
  197.             home_back: 'home_back2'
  198.         })
  200.     },
  202.     //滑动结束事件
  203.     handletouchend: function (e) {
  204.         let that = this;
  205.         if ( that.data.left < (that.data.screenWidth - 60) / 2 ) {
  206.             that.setData({
  207.                 left: 0,
  208.                 home_back: 'home_back1'
  209.             })
  210.         } else {
  211.             that.setData({
  212.                 left: that.data.screenWidth - 60,
  213.                 right: 0,
  214.                 home_back: 'home_back1'
  215.             })
  216.         }
  217.     }
  219. })

用小程序做一个类似于苹果AssistiveTouch功能的更多相关文章

  1. 小程序做一个能够左右滑动切换的多tab页面

    主要原理:使用 <swiper> 和 <scroll-view> 组件 代码片段: https://developers.weixin.qq.com/s/mLx4FWmF757 ...

  2. 用微信小程序做一个小电商 sku

    效果展示图 功能点概述 图一功能点有 搜索 轮播图 商品展示 图二功能点 导航栏 加入购物车 图四功能点 评论点 图五购物车 复选框 ( 全选全不选 ) 即点即改 总计结算 功能详解 1.A(搜索) ...

  3. 微信小程序发布一个月，世界并没有什么不同

    从某种意义上说,在张小龙身上,最可怕的事情莫过于微信小程序发布一个月,一开始的大红大紫居然渐归沉寂,曾经的风光无限已无人谈起,世界并没有什么不同. 这真像一场噩梦,一切都可怕地颠倒了.一款微信的战略级 ...

  4. 微信小程序0.11.122100版本新功能解析

    微信小程序0.11.122100版本新功能解析   新版本就不再吐槽了,整的自己跟个愤青似的.人老了,喷不动了,把机会留给年轻人吧.下午随着新版本开放,微信居然破天荒的开放了开发者论坛.我很是担心官方 ...

  5. 微信小程序调用用百度地图天气功能

    #小程序之调用百度地图天气功能 本篇博客主要介绍小程序在百度地图中获取天气信息,如有不全请指出.下面先上效果图 主要内容 百度地图API的个人密钥,也就是AK 请求百度地图API接口数据 获取到的信息 ...

  6. 微信小程序禁止刷新之后苹果端还可以下拉的问题

    一.问题描述 最近在做一个小程序项目,需要禁止下拉刷新,于是在page.json里面添加了这段话 "enablePullDownRefresh":false 全局关闭下拉刷新,这段 ...

  7. 用微信小程序做H5游戏尝试

    微信小程序发布后,公司虽然没有拿到第一批内测资格,但作为微信亲密合作伙伴,一定要第一时间去尝试啦.现在微信小程序刚发布还在测试阶段,可以说是1.0版本,所以框架和结构内容都还不多,相关的文档跟微信AP ...

  8. Westore 1.0 正式发布 - 小程序框架一个就够

    世界上最小却强大的小程序框架 - 100多行代码搞定全局状态管理和跨页通讯 Github: https://github.com/dntzhang/westore 众所周知,小程序通过页面或组件各自的 ...

  9. 微信小程序创建一个新项目

    1. 新建一个文件夹. 2. 打开微信小程序开发工具,导入新建文件夹:然后输入创建的appId:会自动生成一个project.config.json,打开这个文件,会看到appid这个字段. 3.可以 ...

随机推荐

  1. 解决kubeadm部署kubernetes集群镜像问题

    kubeadm 是kubernetes 的集群安装工具,能够快速安装kubernetes 集群.kubeadm init 命令默认使用的docker镜像仓库为k8s.gcr.io,国内无法直接访问,需 ...

  2. CSS元素隐藏

    { display: none; /* 不占据空间,无法点击 */ } /*************************************************************** ...

  3. js移动端滑动效果

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  4. Blue Star（日剧：今夜 可否拥你入怀歌词）

    BLUE STAR-COLOR CREATION Oh I Know I need you in my life ひさしぶりの 译:时隔许久的 やわらかなかせがふきぬける 清风温柔吹拂 むねのおくの ...

  5. python学习之不要在列表迭代的时候进行增删操作

    注意:列表不能在for循环时使用remove方法 li = [11,22,33,44] for i in li : li.remove(i) print (li) #输出 [22, 44] ​ for ...

  6. 【Qt开发】QTableWidget的详细设置

    在使用Qt不多的日子里,已经两次用到了QTableWidget这个控件,也慢慢的习惯和喜欢上了它.再使用QTableWidget的时候,已不像刚开始使用时的迷茫.嗯嗯.现在就来总结总结我与QTable ...

  7. 几个关于json序列化 的注解

    一.@JsonProperty 1.此注解用于属性上,作用是把该属性的名称序列化为另外一个名称.例如: @JsonProperty("name") private String N ...

  8. POJ - 2421 Constructing Roads（最小生成树&并查集

    There are N villages, which are numbered from 1 to N, and you should build some roads such that ever ...

  9. [BZOJ2144][国家集训队2011]跳跳棋

    题目描述 跳跳棋是在一条数轴上进行的.棋子只能摆在整点上. 每个点不能摆超过一个棋子. 我们用跳跳棋来做一个简单的游戏:棋盘上有3颗棋子,分别在\(a\),\(b\),\(c\)这三个位置. 我们要通 ...

  10. hibernate update-->参数绑定

    Hibernate 更新数据库 参数绑定总结: 一.query.setParameter(属性名,真实值,类型); String hql="update User u set u.userN ...