有贊招聘小程序，有你就很贊

時間 2019-11-24

標籤招聘程序简体版

原文原文鏈接

前言

學了大概一個月的小程序，從對小程序的一無所知，到如今對小程序的漸漸熟悉，其實內心挺開心的。如今看到一個小程序，腦子裏想的不是這個功能怎麼怎麼好用，而是在想這個功能該怎麼實現，應該怎麼設置數據，大概的邏輯該是怎麼樣的，這是這個小項目對我最大的幫助。這個小程序用了一週時間，想着趁剛剛學完，趕忙作個小項目鞏固下本身學習的內容，效果仍是很好的。這個小程序說不上很高級，若是您是大神，您能夠跳出文章，這些知識您都知道，就不要浪費您時間了，留着點時間看別的有用的知識。若是您也是跟我同樣的新手，想鞏固本身的學習內容，那您能夠看看我這篇文章，我會對我踩得坑以及一些解決辦法還有一些效果的實現作一個總結，或許對您有幫助。php

小功能的實現

小坑提醒

swiper組件圓點位置的改變

swiper組件圓點的默認位置在中間，找了好久找到圓點位置的設置屬性html

.product-image .wx-swiper-dots.wx-swiper-dots-horizontal{
     margin-bottom: 2rpx;
     margin-left: 300rpx;
}
複製代碼

swiper滑動同步改變內容

在swiper組件上綁定bindchange事件，而後使用current表示當前滑塊id，而後在要顯示文字的view中綁定數據層的current，實現同步 wxml:git

<swiper class="product-image" indicator-active-color="#fff" indicator-dots="true" bindchange="changeDec" current="{{current}}" circular="true">
            <block wx:for="{{productImg}}" wx:for-index="index" wx:key="id">
                <swiper-item>
                    <image src="{{item.url}}" class="slide-image" mode="aspectFill" />
                </swiper-item>
            </block>
      </swiper>
     <view class="product-dec" data-id="{{current}}">{{name}}</view>
複製代碼

jsgithub

changeDec: function (e) {
    let current = e.detail.current;
    switch (current) {
      case 0:
        this.setData({
          name: '有贊零售'
        })
        break;
      case 1:
        this.setData({
          name: '有贊雲'
        })
        break;
      case 2:
        this.setData({
          name: '有贊微商城'
        })
        break;
    }
    this.setData({
      current: current,
    })
  },
複製代碼

標題欄標題與兩邊線的距離

因爲使用了weui，樣式默認爲原有樣式，可是我又想改下他們之間的距離，而後在源碼中找到了設置方法chrome

.weui-loadmore__tips_in-line{
  padding: 0 2em;
  color: #6e6e6f;
}
複製代碼

列表上cell的線的隱藏

上邊框的線怎麼隱藏？試了很久,還覺得是border的問題，後面發現這個是僞元素的問題，這個也是看源碼分析出的，發現看源碼真的能解決不少問題小程序

.company-adress>.weui-media-box:nth-child(3):before{
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1rpx solid #e5e5e5;
  left: 7px
}
.company-adress>.weui-media-box:nth-child(4):before{
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1rpx solid #e5e5e5;
  left: 7px
}
複製代碼

map組件遮住內容的問題

因爲map組件的優先級最高，試了不少下，想把view放上去，不過最後都無功而返，最後百度下，發現用cover-view能夠，不過cover-view能用的範圍也很少，暫時還沒找到更加好的辦法segmentfault

文字間沒法插入空格的問題

有時候有些文字描述的內容沒有必要再加一個text標籤，可是內容間又有間距怎麼辦？剛開始用&nbsp後面測試下發如今小程序裏直接這樣是沒有用的，必須加上decode="{{true}}"，還要記得加分號，否則沒有用瀏覽器

<text decode="{{true}}" class="titleTag">#簡歷處理快如閃電&nbsp;&nbsp;&nbsp;#不多回聊天信息&emsp;#早上活躍</text>
複製代碼

不過我更加傾向於用第二種方法:把輸入法改爲全角，而後就能夠愉快的使用空格打空格了緩存

數據的操做

頁面間數據的傳遞
- wx.request或者navigator的url參數代入一個個性值，經過與另外一個頁面間的數據匹配，實現頁面間數據的同步
- 緩存setStorage,getStorage,一邊設置，另外一邊獲取
- globalData,全局變量,經過getApp().globalData方法賦值

狀態操做的經驗bash

只要涉及到狀態操做的，能夠考慮使用三元運算符，經過在數據層true or false控制狀態，而後視圖層經過類名控制樣式

工具與網站分享

個人一些想法

底部tabBar能夠經過設置一大一小圖片，展現選中效果，這樣會有一種動態效果，會不會體驗更好一點？

最後小結

這個項目確確實實的加深了我對小程序的理解，但更重要得是，能感受到本身獨立解決問題的能力提高很多，最後總結的時候會發現本身踩過好多坑，雖然中途也由於沒解決問題感到痛苦，可是如今總結寫文章的時候，感受很棒，對本身走過的路總結，檢討的過程是真的很愉快的，會對本身認識也更深入一點，最後但願本身會愈來愈好，但願之後能給社區帶來更好的項目，最後附上源碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。