全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[泉州seo公司到久澳]微信小程序实例:收藏与取消收藏图片以及切换图片的功

  本篇文章给大家带来的内容是关于微信小程序实例:收藏与取消收藏图片以及切换图片的功能效果,有一定的参考价值■▽▪,有需要的朋友可以参考一下◁•▷,希望对你有所帮助。
 

  wxml界面使用image标签

  

<◇▼▷•;image wx:if="{{collected}}"▷…□; catchtap='onCollectionTap' src='/images/icon/collection-…▽.png'>••-•;</image>
 <▲●•;image wx:else src='/images/icon/collection-anti.png' catchtap='=•;onCollectionTap'><●△-;/image>

 

  js文件上的脚本:

  

// pages/post_detail/post_detail•△▷-.js
var postData = require("▷■;../../data/posts_data.js")
Page({
 /**
 * 页面的初始数据
 */
 data: {
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
 var postId = options◆…★◇.id▷…◆;
 this.data◇○☆★.currentPostId = postId
 var postsData = postData.postList[postId];
 console.log(postsData);
 // this●•▪.data▪•.postData=postsData;
 this.setData({
 post_key•=▪: postsData
 })
 // var postsCollected={
 // 1•◆:"▽△;true",
 // 2:"false"▲▲●▼;,
 // 3:"true"▽◆,
 // }
 // console.log(postData)▲…△;
 // 从缓存中读取所有的缓存状态
 var postsCollected = wx.getStorageSync("posts_Collected"●…○◇;)
 //如果缓存为真,执行以下代码
 if (postsCollected) {
 //读取其中一个缓存状态
 var postsCollected = postsCollected[postId]
 this◁★-.setData({
 //将是否被收藏的状态上绑定到collected这个变量上
 collected=…: postsCollected
 })
 } else {
 var postsCollected = {}△★•☆;
 postsCollected[postId] = false;
 wx.setStorageSync("posts_Collected"•□•;▷○•◇, postsCollected)
 }
 },
 onCollectionTap•☆□△: function(event) {
 //获取缓存的方法
 var postsCollected = wx.getStorageSync('posts_Collected'▼☆□=;);
 var postCollected = postsCollected[this.data○☆◆△.currentPostId];
 console■…….log(postCollected);
 //取反操作,收藏的话,点击变成未收藏,广汉市小程序开发哪家好反之,变成收藏。
 postCollected = !postCollected==…★;
 postsCollected[this.data.currentPostId] = postCollected;
 // //更新文章是否收藏的缓存值。固原市小程序制作公司
 // wx.setStorageSync('posts_Collected'▽●◆, postsCollected)
 // //更新数据绑定变量,从而实现切换图片。
 // this◇◆◁.setData({
 // collected★○: postCollected
 // })
 this•▲◁▽.showModal(postsCollected, postCollected)
 // wx.showToast({
 // title: postCollected ? "收藏成功"▽◁; •◁•●: "取消收藏",
 // duration•◆: 800,
 // icon: "□▽-;success"
 // })
 // wx.showModal({
 // title: '确定收藏',
 // content: '这是一个模态弹窗',
 // success: function (res) {
 // if (res.confirm) {
 // console.log('-■☆;用户点击确定')
 // } else if (res.cancel) {
 // console.log('▼▲◇;用户点击取消'☆●★▷;)
 // }
 // }
 // })
 console▼■▪.log("••◇;onCollectionTap"-…☆;);
 },
//使用showModal API来实现界面上逻辑操作•▼•。
 showModal: function(postsCollected, postCollected) {
//这个注意一下,[泉州seo公司到久澳]由于this是在page下调用的方法,这里是在自定义函数下,所有必须重新赋值到一个新的变量,才能重新使用,不明白的同学们,记住就行。26
										2020.10
									
									
								
								
									[达州seo公司都选久澳]小程序开发--input标签实例教程
									
										这篇文章主要介绍了微信小程序中input标签详解及简单实例的相关资料◇○,需要的朋友可以参考下 微信小程序中input标签详解及简单实例 使用input标签■,我们都会☆▲▼, 新郑市小程!
 var ts = this;
 wx.showModal({
 title★◇: '收藏'○◇,
 content●◁▲•: postCollected ? "收藏该文章" : "◇☆◆★;取消收藏该文章"▪▽;,
 success: function(res) {
 if (res=☆▽.confirm) {
 wx.setStorageSync('posts_Collected', postsCollected)
 //更新数据绑定变量,从而实现切换图片。
 ts.setData({
 collected▲-: postCollected
 })
 console.log('用户点击确定'▲◁◆▼;)
 } else if (res◆▷▲□.cancel) {
 console.log('用户点击取消'▽◆□-;)
 }
 }
 })
 }◆•-,
 // onCollectionTap◁▲□: function(event) {
 // var baoxue = wx.getStorageSync("★▽◇;key")◇◇-;
 // console.log(baoxue)★□;
 // },
 onShareTap: function(event) {
 // wx.removeStorageSync("▲★◁;key")
 //缓存的上限最大不能超过10MB
 wx.clearStorageSync();
 console★-◁△.log("onShareTap"○★△△;);
 },
 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function() {
 }•▲,
 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function() {
 },
 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function() {
 }★▼,
 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function() {
 }●■◇,
 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function() {
 },
 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function() {
 console.log("●=▲▽;到底了");
 }○…◇,
 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function() {
 }
})

 

  

 

  

 

  

 

  相关推荐:

  微信小程序实例★=-□:如何实现滑动选择器(附代码)

  微信小程序页面跳转的方法(附代码)

  

 

  以上就是微信小程序实例:收藏与取消收藏图片以及切换图片的功能效果的详细内容,更多请关注久澳传媒编程栏目其它相关文章!

[泉州seo公司到久澳]微信小程序实例:收藏与取消收藏图片以及切换图片的功能效果

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。