小程序ios position: sticky失效 替换成position: -webkit-sticky可以使用
去掉滚动条样式
::-webkit-scrollbar{width: 0; height: 0; color: transparent;}
mpvue -左导航 右商品 （带点击导航跳掉指定地方） scroll-view
<div class="left" style="width: 100%;height: calc(100vh - 375rpx);">
<scroll-view class="commodity left" :style="{'height': '99%'}" :scroll-y="true" >
<div style="height: 100%;">
<span :class="{on:vid==index}" :key="index" v-for="(list,index) in commoditys" @click="chooseTab(index)">{
{list.name}}</span>
</div>
</scroll-view>
<scroll-view class="detail left" :style="{'height': '99%'}" :scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll" :scroll-into-view="toView">
<div class="lagerDiv" v-for="(list,index) in commoditys" :key="index" :id="list.pid">
<div class="title">{
{list.name}}</div>
<div class="shop" v-for="(list_,index_) in renqiTop" :key="index_">
<img src="../../../static/images/banner2.jpg" alt="">
<div class="left" style="margin-left: 20rpx;" >
<span class="name">大果粒s</span><br>
<span class="en_name">Big fruit grain of</span><br>
<span class="money">
<span>￥27</span>
<img src="../../../static/images/add.png" alt="">
</span>
</div>
<div style="clear: both;"></div>
</div>
</div>
</scroll-view>
</div>
<script>
export default {
data() {
return {
toView:"",
vid:0,
renqiTop:[1,2,3,4],
jingdian:[1,2,3],
commoditys: [{
name: "人气TOP",
id:0,
pid:"main0"
},
{
name: "经典美食",
id:1,
pid:"main1"
},
{
name: "湘西爆炒",
id:2,
pid:"main2"
},
{
name: "西点主食",
id:3,
pid:"main3"
},
{
name: "小炒",
id:4,
pid:"main4"
},
{
name: "本地私房菜",
id:5,
pid:"main5"
}
],
images: [{
url: "http://img3.imgtn.bdimg.com/it/u=2870322368,453611869&fm=26&gp=0.jpg"
},
{
url: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3170578279,93325480&fm=26&gp=0.jpg"
}
]
}
},
components: {
//Swiper
},
methods: {
chooseTab(num){
console.log(num);
this.vid = num;
this.toView = this.commoditys[num].pid;
}
},
created() {
// let app = getApp()
}
}
</script>
<style scoped>
.detail .shop .left .money img{
width: 30rpx;
height: 30rpx;
float: right;
margin-right: 30rpx;
}
.detail .shop .left .money{
font-size: 14px;
font-weight: 600;
margin-top: 15rpx;
width: 100%;
}
.detail .shop .left .en_name{
font-size: 10px;
color: #d1d1d1;
}
.detail .shop .left .name{
font-weight: 600;
color: #000;
font-size: 14px;
}
.detail .shop .left span{
display: inline-block;
}
.detail .shop .left{
width:calc(100% - 150rpx)
}
.detail .shop>img{
width: 120rpx;
height: 120rpx;
float: left;
}
.detail .shop{
height: auto;
width: 100%;
margin: 20rpx 0;
}
.lagerDiv{
position: relative;
}
.detail{
margin-left: 20rpx;
font-size: 12px;
width: calc(78% - 25rpx);
margin-top: 10rpx;
height: auto;
overflow-y: auto;
}
.detail .title:before{
content: " ";
position: absolute;
top: 10px;
left: 125rpx;
width: calc(80% - 25rpx);
height: 1px;
background: #d1d1d1;
}
.commodity span.on {
background: #fff;
color: #333;
}
.commodity span {
width: 100%;
padding: 20rpx 0;
text-align: center;
display: inline-block;
background: #f1f1f1;
color: #c1c1c1;
font-size: 12px;
}
.commodity {
width: 22%;
/* height: auto; */
}
.left {
float: left;
}
.right {
float: right;
}
</style>
小程序点击 变色
<view class="{
{'1'==vid?'org_color':''}}" data-id="1" bindtap="click_over"></view>
data:{vid:0}
click_over:function(e){
let id = e.currentTarget.dataset.id;
this.setData({vid:id})
}
小程序 app.json设置了底部导航 wx.navigateTo 就不能跳转已经设置过的页面 除非用
wx.switchTab({
url:"../index/index"
})
用于wx.navigateTo之后 delta返回的页面（1是上个 2是上上个以此类推 并且程序左上角的>可以少点击相应次数）
wx.navigateBack({
delta:1
})
关闭当前页面，跳转到应用内的某个页面。
wx.redirectTo({
url: ''
})
关闭所有页面，打开到应用内的某个页面。
wx.reLanch({
url: ''
})
navigator 组件默认的 open-type 为 navigate
<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页
面</navigator>
redirect 对应 API 中的 wx.redirect 方法
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-
class="other-navigator-hover">在当前页打开</navigator>
switchTab 对应 API 中的 wx.switchTab 方法
<navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换
Tab</navigator>
reLanch 对应 API 中的 wx.reLanch 方法
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-
class="other-navigator-hover">关闭所有页面，打开到应用内的某个页面</navigator>
navigateBack 对应 API 中的 wx.navigateBack 方法
<navigator url="/page/index/index" open-type="navigateBack" hover-class="other-navigator-hover">
关闭当前页面，返回上一级页面或多级页面
wx.navigateBack({ delta: 2 })
小程序分享按钮触发
<label for="share-button"></label>
<button id="share-button" open-type="share"></button>
小程序去除空格value.replace(/\s+/g, “”)
拨打电话 wx.makePhoneCall({phoneNumber:“15325215214”})
小程序open-data type=“userAvatarUrl” class=“img” 获取头像 更改样式：父级 要设置成
display: flex;（可以更改样式）
flex-direction: column;（头像占据一整行）
align-items: center;（头像居中） 才可以 设置.img的样式
获取随机数：获取随机数Math.floor(Math.random()*50)
Math.random()会获取0-1之间的一个数值Math.floor取整
小程序 wx.previewImage预览图片方法 如果图片只有一张 urls也要集合显示urls:[“图片地址”],current:“第一张图片地址”
小程序table表格
<view class="table">
<view class="tr">
<view class="th">商铺编号</view>
<view class="th">商铺名称</view>
</view>
<view class="tr" wx:for="{
{shopName}}">
<view class="td">{
{index+1}}</view>
<view class="td">{
{shopName[index]}}</view>
</view>
</view>
.table{
border:1px solid #dadada;
width: 99%;
border-right: none;
border-bottom: none;
}
.tr{
width: 100%;
display: flex;
justify-content: space-around;
}
.th,.td{
padding: 10px;
width: 100%;
border-bottom: 1px solid #dadada;
border-right: 1px solid #dadada;
text-align: center;
}