个人案例
- 背单词小助手
单词收藏助手, 创建属于你自己的词库,随时随地学习、记忆单词!
单词收藏助手扫码体验
- 单词收藏助手
当你在阅读英文文档时是否会遇到不认识的单词?可能你会安装谷歌翻译插件来查询翻译,但下次阅读到同一个单词你可能还是不认识。 秉持一个学习的心态,单词收藏助手诞生了。 单词收藏助手是一款帮你收藏单词的小程序,配合Chrome插件,当你在遇到不认识的单词时收藏起来,创建属于自己的词库,利用碎片时间打开微信小程序进行记忆、学习。 使用帮助 、在Chrome应用商店或360浏览器应用商店搜索单词收藏助手,并安装。 2、点击浏览器扩展栏中的图标登录。 3、选中需要收藏的单词后会弹出一个气泡图标,点击气泡图标即可完成收藏,也可以点击右键菜单中的按钮收藏。
03-13 - 如何实现一个简单的swiper效果
简单的siwper效果,又是逛社区发现老哥提的想要该效果,那么有需要,咱们就得上啊: 效果图: [图片] 上代码: wxml [代码]<view class="container"> <swiper duration="200" previous-margin="140rpx" next-margin="140rpx" bindchange="currentHandle" circular="{{true}}" class="swiper-out"> <block wx:for="{{punchList}}" wx:key="*this"> <swiper-item class="swp-item {{current === index ?'active-item': ''}}"> <view class="slide-image" style=" background: url({{item.bannerUrl}}) no-repeat center center;background-size: 100% 100%;" id="{{index}}"></view> </swiper-item> </block> </swiper> <view class="swp-dot"> <view class="square-12 m-r-8 {{current === index ?'active': ''}}" wx:for="{{punchList}}" wx:key="{{index}}"></view> </view> </view> [代码] JS [代码]const app = getApp() Page({ data: { punchList: [{ "bannerUrl": "https://qiniu-image.qtshe.com/1536067857379_122.png" }, { "bannerUrl": "https://qiniu-image.qtshe.com/1536068379879_115.png", }, { "bannerUrl": "https://qiniu-image.qtshe.com/1536068319939_230.png", }, { "bannerUrl": "https://qiniu-image.qtshe.com/1536068074140_695.png", }, { "bannerUrl": "https://qiniu-image.qtshe.com/1536068213758_796.png", }], current: 0 }, currentHandle(e) { let { current } = e.detail this.setData({ current }) } }) [代码] wxss [代码].container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100vh; } .slide-image { height: 600rpx; width: 400rpx; margin-top: 20rpx; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10rpx; } .swiper-out { width: 750rpx; height: 660rpx; margin-top: 60rpx; } .active-item .slide-image { box-shadow: 0 5rpx 20rpx 3rpx rgba(0, 0, 0, 0.15); } .swp-item { width: 400rpx; display: flex; flex-direction: column; align-items: center; padding-top: 4rpx; opacity: 0.6; } .active-item { opacity: 1; } .swp-dot { display: flex; justify-content: center; flex: 1; margin-top: 18rpx; } .m-r-8 { margin-right: 8rpx; } .m-l-8 { margin-right: 8rpx; } .square-12 { width: 12rpx; height: 12rpx; background-color: #d8d8d8; border-radius: 6rpx; transition: width 0.2s linear; } .active { background-color: #3c3c3c; width: 36rpx; transition: width 0.2s linear; } [代码] 代码放完了,看下效果吧。代码片段如下: https://developers.weixin.qq.com/s/DCK6HJmw7kaZ
2019-12-19 - 怎么用一组图片实现3D效果的商品展示?(类似于这种的,这是在网页上实现的,怎么用小程序实现这个)
[图片][图片]
2020-11-09 - 为什么小程序管理中心的功能菜单下没有了直播入口,以前有的?wx4a2f66d67528c776
[图片]
2020-10-20