小程序学习

内页不自定义导航：

在内页文件夹的json中写上：

{

 "navigationBarBackgroundColor": "#ffffff",　　　　　　//顶部背景颜色

  "navigationBarTextStyle": "black",　　　　　　　　　　//修改顶部文字颜色　　　　　　　　

  "navigationStyle": "default",      　　　　　　　　  //顶部不自定义导航

  "navigationBarTitleText": "产品中心"　　　　　　　　　　//修改顶部文字

}

上面是设置单页面的代码，不需要加window

 

 

下面是全局设置的代码，需要加window

 

 

"window": {

    "backgroundColor": "#fafafa",

    "backgroundTextStyle": "light",

    "navigationBarBackgroundColor": "#fff",

    "navigationStyle":"custom",　　　　　　　　　　　　//顶部自定义导航

    "navigationBarTextStyle": "black"

  },

 

 

小程序的tab 切换功能：

 

wxml：

 

<view class='container'>
  <!--Tab布局-->
  <view class='title'>
    <view class='titleSel' bindtap='titleClick' data-idx='0'>
      <text>第一个选项</text>
      <hr class="{{0 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}}" />
    </view>
    
    <view class='titleSel' bindtap='titleClick' data-idx='1'>
      <text>第二个选项</text>
      <hr class="{{1 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}} " />
    </view>
  </view>

  <!--内容布局-->
  <swiper class='swiper' bindchange='pagechange' current='{{currentIndex}}'>
    <swiper-item class='swiper'>
      <view wx:for="{{firstList}}" class='recordItem'>
        <view class='name'>昵称：{{item}}</view>
      </view>
    </swiper-item>
    <swiper-item class='swiper' class='swiper'>
      <view wx:for="{{secondList}}" class='recordItem'>
        <view class='name'>昵称：{{item}}</view>
      </view>
    </swiper-item>
  </swiper>
</view>

 

 

 

wxss样式代码：

 

.container {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.title {
  width: 100%;
  height: 88rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.titleSel {
  color: #5f6fee;
  font-size: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.titleUnsel {
  color: #858fab;
  font-size: #858fab;
}

.headerLineSel {
  background: #5f6fee;
  height: 6rpx;
  width: 40rpx;
  position: relative;
  margin-top: 10rpx;
}

.headerLineUnsel {
  background: #fff;
  height: 6rpx;
  width: 40rpx;
  position: relative;
  margin-top: 10rpx;
}

.swiper {
  width: 100%;
  flex: 1;
  height:100vh;
  overflow: scroll;
}

.recordItem {
  margin-top: 10rpx;
  background-color: white;
  padding-bottom: 20rpx;
  padding-top: 20rpx;
}

 

 

 

 

js代码：

 

 data: {
    currentIndex: 0,
    "firstList": ["LXT", "LXT", "LXT", "LXT", "LXT", "LXT"],
    "secondList": ["GFF", "GFF", "GFF", "GFF", "GFF", "GFF", "GFF", "GFF"]
  },
  //swiper切换时会调用
  pagechange: function (e) {
    if ("touch" === e.detail.source) {
      let currentPageIndex = this.data.currentIndex
      currentPageIndex = (currentPageIndex + 1) % 2
      this.setData({
        currentIndex: currentPageIndex
      })
    }
  },
  //用户点击tab时调用
  titleClick: function (e) {
    let currentPageIndex =
      this.setData({
        //拿到当前索引并动态改变
        currentIndex: e.currentTarget.dataset.idx
      })
  }

 

 

 

 

增加底部tabbar选项：

 

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "案例1"
      },
      {
        "pagePath": "pages/jiaocheng/jiaocheng",
        "text": "教程"
      }
    ]
  },

 

 

 小程序添加弹窗：

https://www.cnblogs.com/demodashi/p/9452967.html

 

 小程序添加自定义组件：

 

 

给要添加的页面加上这个配置

 

 

 

json文件写这个

{
  "navigationBarBackgroundColor": "#ffe300",
  "navigationStyle": "default",
  "navigationBarTitleText": "账号设置",
  "navigationBarTextStyle": "black",
  "usingComponents": {
    "foot": "../../component/foot/foot"
  }
}

 

 

 

 wxml文件里面用下面调用：

<foot></foot>

 

 

 

 

 

 

 

 

 小程序tab切换功能：

 

 

 

wxml：

<view class='container'>
  <!--Tab布局-->
  <view class='title'>
    <view class='titleSel' bindtap='titleClick' data-idx='0'>
      <text>最新活动</text>
      <hr class="{{0 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}}" />
    </view>
    
    <view class='titleSel' bindtap='titleClick' data-idx='1'>
      <text>专题策划</text>
      <hr class="{{1 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}} " />
    </view>

    <view class='titleSel' bindtap='titleClick' data-idx='2'>
      <text>拍客大赛</text>
      <hr class="{{2 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}} " />
    </view>
  </view>

  <!--内容布局-->
  <swiper class='swiper' bindchange='pagechange' current='{{currentIndex}}'>
    <swiper-item class='swiper'>
      

      11111111111

    </swiper-item>
    <swiper-item class='swiper' class='swiper'>
      
      2222222222222


    </swiper-item>
    <swiper-item class='swiper' class='swiper'>
      
      3333333333333333


    </swiper-item>
  </swiper>
</view>

 

 

 

wxss：

.container {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.title {
  width: 100%;
  height: 88rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 15rpx;
}

.titleSel {
  color: #999999;
  font-size: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.titleUnsel {
  color: #858fab;
  font-size: #858fab;
}

.headerLineSel {
  background: #ffe300;
  height: 6rpx;
  width: 155rpx;
  position: relative;
  top: 23rpx;
}

.headerLineUnsel {
  background: #fff;
  height: 6rpx;
  width: 155rpx;
  position: relative;
  top: 23rpx;
}

.swiper {
  width: 100%;
  flex: 1;
  height:100vh;
  overflow: scroll;
}

.recordItem {
  margin-top: 10rpx;
  background-color: white;
  padding-bottom: 20rpx;
  padding-top: 20rpx;
}

 

 

 

 js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentIndex: 0,
    "firstList": ["LXT", "LXT", "LXT", "LXT", "LXT", "LXT"],
    "secondList": ["GFF", "GFF", "GFF", "GFF", "GFF", "GFF", "GFF", "GFF"]
  },
  //swiper切换时会调用
  pagechange: function (e) {
    if ("touch" === e.detail.source) {
      let currentPageIndex = this.data.currentIndex
      currentPageIndex = (currentPageIndex + 1) % 2
      this.setData({
        currentIndex: currentPageIndex
      })
    }
  },
  //用户点击tab时调用
  titleClick: function (e) {
    let currentPageIndex =
      this.setData({
        //拿到当前索引并动态改变
        currentIndex: e.currentTarget.dataset.idx
      })
  }
})

 

 

 

微信小程序

 

 wxml：

<!-- 插件调用开始 -->

<!-- 文件上传 -->


<view class='ui_cell'>
    <view class='ui_cell_bd'>图片上传</view>
    <!-- <view class='ui_cell_ft'>{{uploaderNum}}/9</view> -->
</view>
<view class='ui_uploader_cell'>
    <view class='ui_uploader_item' wx:for="{{uploaderList}}" wx:key="{{index}}">
        <icon class='ui_uploader_item_icon' bindtap='clearImg' data-index="{{index}}" type="clear" size="20" color="red"/>
        <image bindtap='showImg' data-index="{{index}}" src='{{item}}'></image>
    </view>
    <view class='ui_uploader' bindtap='upload' wx:if="{{showUpload}}"></view>
</view>


<view class="a_j"></view>


<!-- 插件调用结束 -->

 

 

wxss：

/* 插件拿过来开始 */
.ui_cell{
    display: flex;
    position: relative;
    height: 100rpx;
    line-height: 60rpx;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border-bottom: 2rpx solid #eee;
    transform:translate3d(0rpx, 0px, 0px);
}
.ui_cell_bd{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
.ui_panel_bd{
   flex: 1;
}

/* uploader */
.ui_uploader_cell {
    width: 100%;
    padding: 40rpx;
    box-sizing: border-box;
}
.ui_uploader_item{
    float: left;
    position: relative;
    margin-right: 30rpx;
    margin-bottom: 30rpx;
    width: 165rpx;
    height: 165rpx;
}
.ui_uploader {
    float: left;
    position: relative;
    margin-right: 25rpx;
    margin-bottom: 25rpx;
    width: 165rpx;
    height: 165rpx;
    border: 2rpx solid #d9d9d9;
    box-sizing: border-box;
}

.ui_uploader:before {
    content: " ";
    position: absolute;
    width: 4rpx;
    height: 79rpx;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #d9d9d9;
}

.ui_uploader:after {
    content: " ";
    position: absolute;
    height: 4rpx;
    width: 79rpx;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #d9d9d9;
}
.ui_uploader_item_icon{
    position: absolute;
    right: -20rpx;
    top: -20rpx;
    background: #fff;
    border-radius: 50%;
}
.ui_uploader_item image {
    width: 100%;
    height: 100%;
}
/* 插件拿过来结束 */

 

 

 

 wx.js:

 

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    uploaderList: [],
    uploaderNum: 0,
    showUpload: true
  },
  // 删除图片
  clearImg: function (e) {
    var nowList = [];//新数据
    var uploaderList = this.data.uploaderList;//原数据

    for (let i = 0; i < uploaderList.length; i++) {
      if (i == e.currentTarget.dataset.index) {
        continue;
      } else {
        nowList.push(uploaderList[i])
      }
    }
    this.setData({
      uploaderNum: this.data.uploaderNum - 1,
      uploaderList: nowList,
      showUpload: true
    })
  },
  //展示图片
  showImg: function (e) {
    var that = this;
    wx.previewImage({
      urls: that.data.uploaderList,
      current: that.data.uploaderList[e.currentTarget.dataset.index]
    })
  },
  //上传图片
  upload: function (e) {
    var that = this;
    wx.chooseImage({
      count: 9 - that.data.uploaderNum, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        console.log(res)
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        let tempFilePaths = res.tempFilePaths;
        let uploaderList = that.data.uploaderList.concat(tempFilePaths);
        if (uploaderList.length == 1) {
          that.setData({
            showUpload: false
          })
        }
        that.setData({
          uploaderList: uploaderList,
          uploaderNum: uploaderList.length,
        })
      }
    })
  },
  onLoad: function () { }
})

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1