首頁 > web前端 > js教程 > 使用Vue框架如何實現上拉刷新功能

使用Vue框架如何實現上拉刷新功能

亚连
發布: 2018-06-23 18:10:14
原創
3324 人瀏覽過

這篇文章主要為大家詳細介紹了基於Vue框架vux組件庫實現上拉刷新功能,具有一定的參考價值,有興趣的小伙伴們可以參考一下

最近公司在研發app ,選擇了基於Vue框架的vux元件庫,現總結在實現上拉刷新功能遇到的坑:
1. 問題:只刷新一次,解決方法:需要自己手動重置狀態
this.scrollerStatus .pullupStatus = 'default',
2.問題:不能捲動,解決方法:因為啟用keep-alive緩存,需要設定

1

2

3

activated () {

 this.$refs.scroller.reset()

}

登入後複製

如果還沒效果,請在取得後台資料後,執行如下程式碼

1

2

3

this.$nxtTick(() => {

    this.$refs.scroller.reset()

   })

登入後複製

貼出整個頁面的程式碼。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

<template>

  <p style="height:100%;">

 

    <x-header slot="header" :left-options="{showBack: false}" >会议列表

    <a slot="right" v-on:click="show = true" > <icon type="search"></icon> </button> </a>

    </x-header>

 

    <!-- 会议列表 -->

    <scroller v-model="scrollerStatus" height="-46"  lock-x scrollbar-y ref="scroller" :bounce="isbounce" :use-pullup="showUp" :pullup-config="upobj" @on-pullup-loading="selPullUp" >

    <p class="box2">

      <p v-for="list, index in lists"

         <router-link :to="{ path: list.id } ">

           <p style="height:40px;">

            <span class="spanMeetTitle" v-html=&#39;(index+1) + " . " + list.name&#39; ></span>

            <span class="spanMeetStatu" v-html=&#39;list.status&#39;></span>

           </p>

          <p class="prevSuper">

           <form-preview header-label="" header-value="" :bodyItems="list" :footer-buttons="buttons1"></form-preview>

          </p>

          </router-link> 

          <hr> 

       </p>

    </p>

    </scroller>

 

   <!-- 导航 -->

   <Home></Home>

 

   <!-- 搜索 -->

   <popup v-model="show" @on-hide="log(&#39;hide&#39;)" @on-show="log(&#39;show&#39;)" height="93%">

   <p class="popup0">

    <group>

     <x-input v-model=&#39;meetName&#39; placeholder="请输入“会议名称”搜索"></x-input>

     <p style="float:left;margin-top: -36px;"><icon type="search"></icon></p>

    </group>

 <!-- 

    <group>

     <checklist :max=1 title="会议审批状态" required :options="commonList" v-model="checkStatus" @on-change="change"></checklist>

    </group> -->

 

     <group title="会议审批状态">

     <radio :options="commonList" v-model="checkStatus" @on-change="change"></radio>

    </group>

 

    <group title="会议类型">

      <selector placeholder="请选择会议类型" v-model="checkType" :options="meetType"></selector>

    </group>

 

     <group title="召开时间">

     <flexbox>

      <flexbox-item>

      <p class="flex-demo" style="background-color:white;color:black;height:45px">

       <datetime title=&#39;&#39; placeholder="请选择" v-model="startTime" format="YYYY-MM-DD HH:mm" @on-change="change" ></datetime>

      </p>

      </flexbox-item>

      

      <flexbox-item>

      <p class="flex-demo" style="background-color:white;color:black;height:45px">

       <datetime title=&#39;&#39; placeholder="请选择" v-model="stopTime" format="YYYY-MM-DD HH:mm" @on-change="change" ></datetime>

      </p>

      </flexbox-item>

     </flexbox>

    </group>

    <br>

    <flexbox orient="vertical">

     <flexbox-item><p class="flex-demo" v-on:click="toSearch" >确定</p></flexbox-item>

     <flexbox-item><p class="flex-demo" v-on:click="show = false" style="background-color:white;color:black">取消</p></flexbox-item>

    </flexbox>

 

   </p>

  </popup>

 

  <toast v-model="showToast">已加载全部数据</toast>

 

  <loading v-model="isShowLoading" :text="textLoading"></loading>

 

  <alert v-model="isShowAlert" :title="AlertCongratulations" > {{ alertMessage }}</alert>

  </p>

</template>

 

<style type="text/css">

 .weui-form-preview__value{

  font-size: 1.1em !important;

  color: black;

 }

 .spanMeetTitle{

  float: left;

  border-radius: 13px;

  padding:10px 6px;

  font-size: 15px;

  font-weight: bold;

  margin-left: 3px;

  color: black;

 }

 .spanMeetStatu{

   float: right;

   background-color: green;

   border-radius: 10px;

   padding:6px 5px;

   color: white;

   font-size: 13px;

   margin-top: 5px;

 }

 .flex-demo{

  height: 30px;padding-top: 5px;

 }

 .selected{

  color: blue !important;

  background-color: transparent;

 }

 .popup0 {

 padding-bottom:15px;

 height:200px;

 }

 .popup1 {

  width:100%;

  height:100%;

 }

 .popup2 {

  padding-bottom:15px;

  height:400px;

 }

 .box1 {

  height: 100px;

  position: relative;

  width: 1490px;

 }

 .box1-item {

  width: 200px;

  height: 100px;

  background-color: #ccc;

  display:inline-block;

  margin-left: 15px;

  float: left;

  text-align: center;

  line-height: 100px;

 }

 .box1-item:first-child {

  margin-left: 0;

 }

 .box2-wrap {

  height: 300px;

  overflow: hidden;

 }

</style>

 

<script>

import { XHeader, Group, FormPreview, Tabbar, TabbarItem, Scroller, Icon, Popup, XSwitch, Toast, XInput, Checklist, Datetime, Flexbox, FlexboxItem, Selector, Loading, Alert, Radio } from &#39;vux&#39;

import Home from &#39;./Home&#39;

 

export default {

 components: {

  XHeader,

  Home,

  Group,

  FormPreview,

  Tabbar,

  TabbarItem,

  Scroller,

  Icon,

  Popup,

  XSwitch,

  Toast,

  XInput,

  Checklist,

  Datetime,

  Flexbox,

  FlexboxItem,

  Selector,

  Loading,

  Alert,

  Radio

 },

 data () {

  return {

   type: &#39;1&#39;,

   PageIndex: 0,

   show: false,

   showToast: false,

   showloading: false,

   showUp: true,

   isbounce: false,

   isShowAlert: false,

   AlertCongratulations: &#39;条件有误&#39;,

   textloading: &#39;加载中&#39;,

   alertMessage: &#39;‘召开时间&#39; 不能大于 ‘结束时间&#39;&#39;,

   value: &#39;&#39;,

   meetName: &#39;&#39;,

   startTime: &#39;&#39;,

   stopTime: &#39;&#39;,

   meetType: [],

   commonList: [{key: &#39;20&#39;, value: &#39;审批中&#39;}, {key: &#39;50&#39;, value: &#39;审批通过&#39;}, {key: &#39;&#39;, value: &#39;全部&#39;}],

   checkStatus: &#39;&#39;,

   checkType: &#39;&#39;,

   commonList2: [],

   results: [],

   lists: [[]],

   buttons1: [{

    style: &#39;primary&#39;,

    text: &#39;查看更多&#39;,

    link: &#39;/Message&#39;

   }],

   upobj: {

    content: &#39;请上拉刷新数据&#39;,

    pullUpHeight: 60,

    height: 40,

    autoRefresh: false,

    downContent: &#39;请上拉刷新数据&#39;,

    upContent: &#39;请上拉刷新数据&#39;,

    loadingContent: &#39;加载中...&#39;,

    clsPrefix: &#39;xs-plugin-pullup-&#39;

   },

   isShowLoading: false,

   textLoading: &#39;加载中&#39;,

   scrollerStatus: {

    pullupStatus: &#39;default&#39;

   }

  }

 },

 mounted () {

  console.log(this.scrollerStatus.pullupStatus)

  this.getMeetList(true)

  this.getMeetType()

  this.$nextTick(() => {

   this.$refs.scroller.reset()

  })

 },

 methods: {

  log (str) {

   console.log(str)

  },

  getMeetList (isEmpty) {

   var APPROVE_STATUS = this.checkStatus

   var MEETING_TYPE = this.checkType

   this.isShowLoading = true

   this.$http.post(global.httpsUrl + &#39;/Meet/GetMeetList&#39;, {&#39;HumanId&#39;: global.userid, &#39;KEY&#39;: this.meetName, &#39;APPROVE_STATUS&#39;: APPROVE_STATUS, &#39;MEETING_TYPE&#39;: MEETING_TYPE, &#39;START_DATE&#39;: this.startTime, &#39;STOP_DATE&#39;: this.stopTime, &#39;PageIndex&#39;: this.PageIndex, &#39;PageSize&#39;: &#39;2&#39;}).then(response => {

   // sucess callback

    console.log(&#39;111&#39;)

    var data = response.body.Data

    if (isEmpty) {

     this.lists = []

     this.show = false

    } else {

     if (data && data.length === 0) {

      this.showToast = true

      this.isShowLoading = false

      this.scrollerStatus.pullupStatus = &#39;disabled&#39; // 禁用下拉

      return

     }

    }

    for (var i = 0; i < data.length; i++) {

     if (data[i].APPROVE_STATUS < 20) {

      break

     }

     var personName = data[i].PERSION1_NAME

     if (personName && personName.length > 0) {

      personName = personName.substring(0, personName.indexOf(&#39;>&#39;))

     }

     var meetlist = []

     var obj = {

      label: &#39;地点&#39;,

      value: data[i].ADDRESS

     }

     meetlist.push(obj)

     obj = {

      label: &#39;主持人&#39;,

      value: personName

     }

     meetlist.push(obj)

     obj = {

      label: &#39;召开时间&#39;,

      value: global.formatDate.methods.toSet(data[i].ACT_START_TIME, &#39;yyyy-MM-dd HH:mm&#39;)

     }

     meetlist.push(obj)

     obj = {

      label: &#39;会议类型&#39;,

      value: data[i].MEETING_TYPE_NAME

     }

     meetlist.push(obj)

     meetlist.id = &#39;FromMeet/&#39; + data[i].MEETING_MINUTES_GUID + &#39;/123&#39;

     meetlist.name = data[i].MEETING_NAME

     var vstatus = &#39;审批中&#39;

     if (data[i].APPROVE_STATUS === 50) {

      vstatus = &#39;审批通过&#39;

     }

     meetlist.status = vstatus

     this.lists.push(meetlist)

    }

    this.isShowLoading = false

    if (!isEmpty) {

     this.scrollerStatus.pullupStatus = &#39;default&#39;

     // this.$refs.scroller.reset()

     console.log(this.scrollerStatus.pullupStatus)

     this.$nextTick(() => {

      this.$refs.scroller.reset()

     })

    }

   }, response => {

   // error callback

    this.show = false

   })

  },

  showSearch () {

   this.show = true

  },

  change (val) {

   console.log(&#39;change&#39;, val)

   console.log(this.startTime)

  },

  change2 (val) {

   console.log(&#39;change&#39;, val)

  },

  resultClick () {

  },

  getResult () {

  },

  toSearch () {

   console.log(2222)

   if (this.startTime && this.stopTime && this.startTime > this.stopTime) {

    this.isShowAlert = true

   } else {

    this.PageIndex = 0

    this.getMeetList(true)

   }

  },

  selPullUp () {

   console.log(&#39;上拉刷新数据&#39;)

   this.PageIndex++

   this.getMeetList(false)

  },

  getMeetType () {

   this.$http.post(global.httpsUrl + &#39;/Meet/GetMeetType&#39;).then(response => {

    // sucess callback

    var data = response.body.Data

    for (var i = data.length - 1; i >= 0; i--) {

     var obj = {

      key: data[i].TYPE_GUID,

      value: data[i].TYPE_NAME

     }

     this.meetType.push(obj)

    }

   }, response => {

   // error callback

   })

  }

 },

 activated () {

  this.$refs.scroller.reset()

 }

}

</script>

 

 <style lang="less">

@import &#39;~vux/src/styles/1px.less&#39;;

 

.flex-demo {

 text-align: center;

 color: #fff;

 background-color: #20b907;

 border-radius: 4px;

 background-clip: padding-box;

}

</style>

登入後複製

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

在vue中如何實作跳到之前頁面

在Bootstrap框架裡使用treeview如何實作動態加載資料

關於網站產生章節目錄程式碼範例

#詳細介紹Vue資料綁定

以上是使用Vue框架如何實現上拉刷新功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
vue
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
javascript - Vue 未定義
來自於 1970-01-01 08:00:00
0
0
0
javascript - 如何在vue-router中存取VUE實例?
來自於 1970-01-01 08:00:00
0
0
0
javascript - vue-for-idea
來自於 1970-01-01 08:00:00
0
0
0
沒看過VUE的專案實戰
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板