2020年4月21日

微信小程序项目代码片段


<div class="layout" id="app">
<div class="layout-bg">
<div class="muser clearfix">
<div class="muser-info">
<div class="muser-info-img">
<image src="../../assets/imgs/user-img.png"/>
</div>
<div class="muser-info-txt">
<div class="card">微信ID</div>
<div class="txt">优选合伙人</div>
</div>
</div>
<div class="muser-nav">
<div class="muser-nav-item">
<div class="muser-nav-img">
<image src="../../assets/imgs/share.png"/>
</div>
<div class="muser-nav-tit">推荐给好友</div>
</div>
<div class="muser-nav-item">
<div class="muser-nav-img">
<image src="../../assets/imgs/addrs.png"/>
</div>
<div class="muser-nav-tit">
选择自提点
</div>
</div>
</div>
</div>
<div class="mbanner">
<divclass="mbanner-img">
<viewclass="page-section page-section-spacing swiper">
<swiperindicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"interval="{{interval}}"duration="{{duration}}">
<blockwx:for="{{background}}"wx:key="*this">
<swiper-item>
<imagesrc="../../assets/imgs/banner01.png"/>
</swiper-item>
</block>
</swiper>
</view>

</div>

<div class="mbanner-news" wx:if="{{showmsg}}">
<div class="mbanner-news-icon">
<image src="../../assets/imgs/notice.png"/>
</div>
<div class="mbanner-news-tit">
今日暴雨,新农商提醒您菜品配送将可能不及时,请您谅解
</div>
<div class="mbanner-news-close" bindtap="closeMsg">
<image src="../../assets/imgs/close.png"/>
</div>
</div>
</div>
</div>
<div class="msearch">
<div class="msearch-icon">
<image src="../../assets/imgs/search.png"/>
</div>
<div class="msearch-input">
<input type="text" class="text" name="" value="" placeholder="搜索商品" />
</div>
</div>
<div class="mads">
<div class="mads-item">
<a href="#">
<div class="mads-info">
<div class="mads-tit">今日必买</div>
<div class="mads-name">产地直采菜心</div>
<div class="mads-btn">立即开抢</div>
</div>
<div class="mads-img">
<image src="../../assets/imgs/adsimg01.png"/>
</div>
</a>
</div>
<div class="mads-item">
<a href="#">
<div class="mads-info">
<div class="mads-tit">舌尖上的春天</div>
<div class="mads-name">精品武鸣沃柑</div>
<div class="mads-btn">立即开抢</div>
</div>
<div class="mads-img">
<image src="../../assets/imgs/adsimg02.png"/>
</div>
</a>
</div>
</div>
<div class="mnavheight">
<div class="mnav {{tabFix}}" id="tab">
<div class="mnavwrap">

<div class="mnav-item {{navSelect == item ? 'active' : ''}}" wx:for="{{navs}}" wx:key>
<text data-value="{{item}}" bindtap="checkNavs">{{item}}</text>
</div>

</div>
</div>
</div>
<div class="mlist">
<div class="mlist-item">
<a href="#">
<div class="mlist-img">
<image src="../../assets/imgs/img01.jpg"/>
</div>
<div class="mlist-name">
泰国柚子丁|口感嚼劲烘培原料。一袋160克
</div>
<div class="mlist-price">¥36.00</div>
</a>
</div>
<div class="mlist-item">
<a href="#">
<div class="mlist-img">
<image src="../../assets/imgs/img02.jpg"/>
</div>
<div class="mlist-name">
土耳其杏干|软糯香甜大红杏去核,烘培原料。
</div>
<div class="mlist-price">¥36.00</div>
</a>
</div>
<div class="mlist-item">
<a href="#">
<div class="mlist-img">
<image src="../../assets/imgs/img01.jpg"/>
</div>
<div class="mlist-name">
泰国柚子丁|口感嚼劲烘培原料。一袋160克
</div>
<div class="mlist-price">¥36.00</div>
</a>
</div>
<div class="mlist-item">
<a href="#">
<div class="mlist-img">
<image src="../../assets/imgs/img02.jpg"/>
</div>
<div class="mlist-name">
土耳其杏干|软糯香甜大红杏去核,烘培原料。
</div>
<div class="mlist-price">¥36.00</div>
</a>
</div>
<div class="mlist-item">
<a href="#">
<div class="mlist-img">
<image src="../../assets/imgs/img01.jpg"/>
</div>
<div class="mlist-name">
泰国柚子丁|口感嚼劲烘培原料。一袋160克
</div>
<div class="mlist-price">¥36.00</div>
</a>
</div>
<div class="mlist-item">
<a href="#">
<div class="mlist-img">
<image src="../../assets/imgs/img02.jpg"/>
</div>
<div class="mlist-name">
土耳其杏干|软糯香甜大红杏去核,烘培原料。
</div>
<div class="mlist-price">¥36.00</div>
</a>
</div>
<div class="mlist-item">
<a href="#">
<div class="mlist-img">
<image src="../../assets/imgs/img01.jpg"/>
</div>
<div class="mlist-name">
泰国柚子丁|口感嚼劲烘培原料。一袋160克
</div>
<div class="mlist-price">¥36.00</div>
</a>
</div>
<div class="mlist-item">
<a href="#">
<div class="mlist-img">
<image src="../../assets/imgs/img02.jpg"/>
</div>
<div class="mlist-name">
土耳其杏干|软糯香甜大红杏去核,烘培原料。
</div>
<div class="mlist-price">¥36.00</div>
</a>
</div>
</div>
<div class="menu-box">
<div class="menu">
<div class="menu-item active">
<a href="#">
<div class="menu-img">
<image src="../../assets/imgs/nav-home.png"/>
</div>
<div class="menu-tit">首页</div>
</a>
</div>
<div class="menu-item">
<a href="#">
<div class="menu-img">
<image src="../../assets/imgs/nav-shop.png"/>
</div>
<div class="menu-tit">购物车</div>
</a>
</div>
<div class="menu-item">
<a href="#">
<div class="menu-img">
<image src="../../assets/imgs/nav-user.png"/>
</div>
<div class="menu-tit">我的</div>
</a>
</div>
</div>
</div>
</div>

 

//index.js
//获取应用实例
const app = getApp()

Page({
data: {

showmsg: true,
navs: ['精选', '扶贫', '蔬菜', '水果', '肉禽', '蛋乳', '海产', '蛋乳2', '海产2'],
navSelect: '精选',
background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
indicatorDots: true,
vertical: false,
autoplay: false,
interval: 2000,
duration: 500
},

onLoad: function () {
//导航吸顶
let me = this;
//获取tab的距离顶部高度
const query = wx.createSelectorQuery();
query.select('#tab').boundingClientRect(function (res) {
// console.log(res.top)
me.data.tabTop = res.top
}).exec();
},
onPageScroll: function (e) {
let me = this;
//tab的吸顶效果
//console.log(e.scrollTop > me.data.tabTop)
if (e.scrollTop > me.data.tabTop) {
if (me.data.tabFix) {
return
} else {
me.setData({
tabFix: 'mnav-fixed'
})
}
} else {
me.setData({
tabFix: ''
})
}
},
closeMsg: function () {

this.setData({
showmsg: false
})
},

checkNavs: function (event) {
this.setData({
navSelect: event.currentTarget.dataset.value
})
}
})

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732