亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解小程序設(shè)置緩存并且不覆蓋原有數(shù)據(jù)

 更新時(shí)間:2019年04月15日 09:02:01   作者:那個(gè)楚君呀  
這篇文章主要介紹了小程序設(shè)置緩存并且不覆蓋原有數(shù)據(jù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

最近在寫(xiě)小程序的小項(xiàng)目,因?yàn)槭莿偵鲜中〕绦?,這途中遇到了許多問(wèn)題,所幸在自己的堅(jiān)持不懈下基本都得到了解決,今天就記錄一下怎么設(shè)置緩存數(shù)據(jù)并且不覆蓋吧,如果有錯(cuò)誤的地方麻煩大家指正,互相學(xué)習(xí)一下!

這是官方的關(guān)于緩存的說(shuō)明,它會(huì)覆蓋掉之前的內(nèi)容。我還是直接上源碼吧

這是writecomment.js文件

Page({
 /**
  * 頁(yè)面的初始數(shù)據(jù)
  */
 data: {
 },
 submit: function (event) {
  var writecomment = event.detail.value.writecomment;
  console.log(event);
  var pages = getCurrentPages();
  /***得到頁(yè)面有兩個(gè),一個(gè)是總頁(yè)面,一個(gè)是寫(xiě)的頁(yè)面,我們需要的是總頁(yè)面 */
  var page = pages[2];
  var commentlist = page.data.commentlist;
//commentlist是另一個(gè)頁(yè)面設(shè)置的數(shù)組,這里是取得那個(gè)頁(yè)面定義的commentlist
  /***獲取總頁(yè)面data里面的數(shù)組 */
  if (event.detail.value.writecomment != '') {
   commentlist.push(writecomment); /***把新的內(nèi)容放入數(shù)組中去,然后更新 */
   page.setData({
    commentlist: commentlist,
   })
  }
//這是緩存設(shè)置
 wx.setStorage({
  key: 'commentStorage',//key的值只是一個(gè)名稱(chēng),可以自己設(shè)置
  data: commentlist,
//data指的是我們要放入緩存的數(shù)值,如果是固定的數(shù)據(jù)要用“”括起來(lái),如果是變量就直接放變量的值
 })
  console.log(commentlist);//這是為了更好觀察我自己設(shè)置的輸出語(yǔ)句,可以不用管
  wx.navigateBack({}) /***點(diǎn)擊完成后跳轉(zhuǎn)回到上一個(gè)頁(yè)面 */
 },
 
 
 onLoad: function (options) {
 },
})

接下來(lái)是writecomment.wxml文件的代碼

<!--pages/comment/writecomment/writecomment.wxml-->
<view class='write-group'>
 <form bindsubmit='submit'>
  <!-- 文本輸入框 -->
  <view class='textarea-position'>
   <textarea name='writecomment' placeholder='請(qǐng)輸入內(nèi)容!' maxlength='-1' auto-height="true">
   </textarea>
  </view>
  <!-- maxlength='-1'不限制輸入字符長(zhǎng)度,auto-height="true"輸入框可以自動(dòng)變化大小 -->
  
  <view class='btn-position'>
   <button type='primary' form-type='submit'>完成</button>
  </view>
 </form>
</view>

 還有樣式文件也一起放上來(lái)吧

//這是對(duì)應(yīng)的樣式文件
/* pages/comment/writecomment/writecomment.wxss */
/* 最外層樣式 */
.write-group{
 width: 100%;
 height: 1254rpx;
}
/* 輸入框?qū)訕邮?*/
.textarea-group{
 padding: 10rpx;
 width: 98%;
 height: 85%;
 overflow: scroll;
}
/* 提交表格樣式 */
.form{
 width: 100%;
 height: 100%;
}
textarea {
cursor:auto;
width:95%;
height:150px;
display:block;
position:relative;
padding: 10rpx;
}
 
.chooseImg{
 width:20%;
 height: 70rpx;
}
.image{
 width: 170rpx;
 height: 50rpx;
}
.image-btn-group{
 width: 200rpx;
 height: 50rpx;
 display: flex;
 justify-content: space-between;
}
.image-btn{
 width: 100rpx;
 height: 100rpx;
 display: flex;
 justify-content: space-between;
}
.text{
 font-size: 24rpx;
 height: 50rpx;
 width: 100rpx;
}
.textarea-position{
 overflow: scroll;
 height: 1050rpx;
 width: 100%;
}
.btn-position{
 display: fixed;
 margin-bottom: 5rpx;
}
.title {
 width: 100%;
 height: 96rpx;
 line-height: 96rpx;
 font-size: 28rpx;
 color: #989898;
}
.upload {
 width: 100%;
 margin-bottom: 30rpx;
              
}
.uploadImgBox {
 width: 212rpx;
 height: 144rpx;
 margin-right: 33rpx;
 margin-bottom: 10rpx;
 position: relative;
 background: #fff;
}
.uploadImgBox:nth-child(3n) {
 margin-right: 0;
}
.uploadPhoto {
 width: 212rpx;
 height: 144rpx;
}
.closeImg {
 width: 30rpx;
 height: 30rpx;
 border-radius: 50%;
 position: absolute;
 right: 5rpx;
 top: 5rpx;
}
 
.service {
 width: 100%;
 height: 208rpx;
 border-top: 1rpx solid #ece9e9;
 border-bottom: 1rpx solid #ece9e9;
 line-height: 30rpx;
 font-size: 26rpx;
 padding-top: 20rpx;
}
.service textarea {
 width: 100%;
 height: 100%;
}

接下來(lái)是另一個(gè)頁(yè)面,里面有獲取緩存的說(shuō)明

// pages/comment/commentlist/commentlist.js
Page({
 /**
  * 頁(yè)面的初始數(shù)據(jù)
  */
 data: {
  commentlist: [],//設(shè)置緩存的那個(gè)數(shù)組在這里定義的
 },
 writecomment: function (event) {
  wx.navigateTo({
   url: '/pages/comment/writecomment/writecomment',//在頁(yè)面函數(shù)的按鈕
  })
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
  */
 onLoad: function (options) {
  var that = this;
  var commentlist = that.data.commentlist//取得commentlist 
//獲取緩存數(shù)據(jù)
  wx.getStorage({
   key: 'commentStorage',//這個(gè)key值要與writecomment.js里面設(shè)置的key一致
   success: function (res) {
    for (let i in res.data) {
     that.data.commentlist.push(res.data[i])//這里是把緩存數(shù)據(jù)放入到數(shù)組commentlist 里面
    };
    that.setData({
     commentlist: commentlist//刷新commentlist 
    })
   },
  })
  that.setData({
   options: options,
  });
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
  */
 onReady: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
  */
 onShow: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
  */
 onHide: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
  */
 onUnload: function () {
 },
 /**
  * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
  */
 onPullDownRefresh: function () {
 },
 /**
  * 頁(yè)面上拉觸底事件的處理函數(shù)
  */
 onReachBottom: function () {
 },
 /**
  * 用戶(hù)點(diǎn)擊右上角分享
  */
 onShareAppMessage: function () {
 }
})

commentlist.wxml文件

<!--pages/comment/commentlist/commentlist.wxml-->
<view class='p-list-group'>
 <view class='p-list-group-more'>
  <!-- 輸出輸入頁(yè)面輸入的內(nèi)容 -->
  <view class='p-list' wx:for='{{commentlist}}' wx:key="{{index}}">{{item}}</view>
 </view>
 
 <!-- 寫(xiě)計(jì)劃按鈕與搜索按鈕 -->
 <view class='cardclass'>
  <button class='btn-search' open-type='' bindtap='search' style="background-image:url(/images/plan/icon-search-1.png);"> 搜索</button>
  <!-- 寫(xiě)計(jì)劃 -->
 <button class='btn-write' open-type='primary' bindtap='writecomment' style="background-image:url(/images/plan/icon-pen-1.png);">評(píng)論 </button>
 </view>
</view>

樣式文件

/* pages/comment/commentlist/commentlist.wxss */
.p-list-group{
 margin-right: 10rpx;
 margin-left: 10rpx;
 overflow: scroll;
 width:98%;
 right:1rpx;
}
.p-list-group-more{
 right:1rpx;
 overflow: scroll;
 height:1000rpx;
 width:100%;
 margin-top: 10rpx;
}
.p-list{
 text-overflow: ellipsis;/***文本太長(zhǎng)顯示省略號(hào)*/
 overflow: scroll;
 width:99%;
 border: 1px solid #ccc;
 margin-right: 10rpx;
 margin-bottom: 20rpx;
 height: 100rpx;
}
.btn-search{
 position: fixed;
 bottom: 5rpx;
 width: 30%;
 background-size: 45rpx 45rpx;
 background-repeat:no-repeat;
}
.btn-write{
 position: fixed;
 bottom: 5rpx;
 width: 30%;
 background-size: 45rpx 45rpx;
 background-repeat:no-repeat;
 right:10rpx;
}
.cardclass{
 display:flex;
 font-size:18rpx;
 justify-content: space-between;
 bottom: 5rpx;
 height:25rpx;
}
.image-list{
 width:40rpx;
 height:30%;
}

好啦,我做的基本就這樣,代碼有點(diǎn)多,關(guān)鍵就是wx.setStorage()和wx.getStorage(),為了方便我還是把兩個(gè)頁(yè)面完整代碼全部放這里了

以上所述是小編給大家介紹的小程序設(shè)置緩存并且不覆蓋原有數(shù)據(jù)詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

最新評(píng)論